@charset "UTF-8";


body {
    font-size: 16px;
    font-family: "Sawarabi Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Times New Roman", "serif";
}

img{
	max-width: 100%;
	height: auto;
	display: block;
	-ms-interpolation-mode: bicubic;
}

#header {
    width: 100%;
    height: 70px;
    display: block;
    background-color: #ED91A2;
	position: fixed;
	z-index: 999;
}

.header_area {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#logo {
	padding: 15px 0 0 20px;
}

h1{
	width: 150px;
	height: 30px;
}



/*トグル・グローバルナビ*/

#nav-toggle {
  	position: fixed;
  	top: 10px;/*25px*/
  	right: 5%;/*5px*/
  	cursor: pointer;
	width: 50px;/*背景サークルここから*/
	height: 50px;
	border-radius: 50%;
	background-color: #fff;
}

#nav-toggle > div {
  	position: absolute;
  	width: 24px;/*40px*/
	height: 17px;/*#nav-toggleのheight:17px;をここで指定*/
	top: 13px;/*線の位置ここから*/
	left: 13px;
}

#nav-toggle span {
    width: 100%;
    height: 5px;/*3px 太さ*/
    left: 0;
    display: block;
    background-color: #000;
    position: absolute;
    -webkit-transition: top .5s ease, -webkit-transform .6s ease-in-out;
    transition: top .5s ease, -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out, top .5s ease;
    transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 10px;/*14px*/
}
#nav-toggle span:nth-child(3) {
  top: 20px;/*28px*/
}
#nav-toggle:hover span:nth-child(1) {
  top: 4px;/*4px*/
}
#nav-toggle:hover span:nth-child(3) {
  top: 16px;/*23px*/
}

.open #nav-toggle span {
  background: #000;
}
.open #nav-toggle span:nth-child(1) {
  top: 10px;/*15px*/
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  top: 10px;
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
  z-index: 1000;
}

#container {
	padding-top: 70px;
    z-index: 0;
}



#gloval-nav {
    background: #FFF;
    background-image: url(../img/pic_bg.jpg);
    background-color: rgba(255,255,255,0.7);
    background-blend-mode: lighten;
    color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: center;
    display: -webkit-box;
    display: flex;
    visibility: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: start;/*メニュー開始位置*/
    -webkit-box-align: center;
    align-items: center;
    font-size: 29px;
    opacity: 0;
    -webkit-transition: opacity .6s ease, visibility .6s ease;
    transition: opacity .6s ease, visibility .6s ease;
    overflow: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#gloval-nav a {
    display: block;
    color: #404040;
    text-decoration: none;
    padding: 10px 0;/*行間*/
    -webkit-transition: color .6s ease;
    transition: color .6s ease;
}
#gloval-nav a {
	margin-top: 40px;
}
#gloval-nav a:hover {
    color: #007C3E;
}
#gloval-nav ul {
  list-style: none;
}
#gloval-nav ul li {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#gloval-nav ul li:nth-child(2) {
  -webkit-transition-delay: .15s;
          transition-delay: .15s;
}
#gloval-nav ul li:nth-child(3) {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}
#gloval-nav ul li:nth-child(4) {
  -webkit-transition-delay: .45s;
          transition-delay: .45s;
}
#gloval-nav ul li:nth-child(5) {
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}
#gloval-nav ul li:nth-child(6) {
  -webkit-transition-delay: .75s;
          transition-delay: .75s;
}
#gloval-nav ul li:nth-child(7) {
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}

/* open */
.open {
  overflow: hidden;
}
.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}
.open #gloval-nav li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}



/*グローバルメニュー内マウスホバーでアニメーション*/
.cp_link {
	position: relative;
	padding: 0.1em 0.3em;
	display: inline-block;
	transition: .3s;
	color: #007C3E;
}
.cp_link::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 2px;
	background-color: #007C3E;
	transition: .3s;
	transform: translateX(-50%);
}
.cp_link:hover::after {
	width: 100%;
}

/*トグル・グローバルナビ ここまで*/




/*FONT-style ここから*/

.ft_01 {
	font-size: 2em;
	text-align: justify;
	padding: 3em 0;
}

.ft_02 {
	font-size: 1.2em;
	letter-spacing: 0.1em;
	line-height: 2em;
	text-align: justify;
	padding: 0 0 3em;
}

.ft_03 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 0.85em;	
}

.ft_04 {
	font-size: 1em;
	text-align: center;
	padding-bottom: 0.7em;
	letter-spacing: 0.1em;
}

.ft_05 {
	font-size: 1.8em;
	text-align: center;
	padding-bottom: 1em;
}

.ft_06 {
	font-size: 0.9em;
	text-align: center;
	padding-bottom: 1em;
}

#container {
	width: 100%;
	height: auto;
}


#footer {
	background-color: #fff;
}

.f-navi{
	width: 50px;
	height: 50px;
	background-color: #fff;
	margin: 0 auto;
	padding: 100px 0 0;
}

.sns-icon{
	width: 50px;
	height: 50px;
}

.copyright {
    font-size: 0.7em;
    color: #39A555;
    font-style: normal;
    padding-top: 1em;
    padding-bottom: 15em;
    padding-left: 1em;
    text-align: center;
}

.footer_img {
	width: 150px;
	margin: 0px auto 10px;
	padding-top: 100px;
	background-color: #fff;
}




.top_btn {
    width: 120px;
    height: 30px;
    background-color: #D6D5A8;
    border-radius: 5px;
    text-align: center;
    padding-top: 0.6em;
    border: 2px solid #39A555;
    position: fixed;
    bottom: 20px;
    right: 3.5%;
    z-index: 1000;
    color: #4F4F4F;
}
.top_btn a {
    display: block;
}
.top_btn a:hover {
    opacity: 1.0;
}


.top_btn:after{
	content:"";
	position:absolute;
	top:-1.3em;
	bottom: 1.3em;
	right:42.5%;
	margin:auto;
	width: 15px;
	height: 15px;
	border-top: 2px solid #449D47;
	border-right: 2px solid #449D47;
	transform: rotate(-45deg);
	transition:.3s;
}

.top_btn:hover:after{
	top: -2.8em;
}







/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(150px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}



@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */
	#header {
	    display: -webkit-flex;
	    display: block;
	    -webkit-justify-content: space-around;
	    justify-content: space-around;
	    position:fixed;/*fixed*/
	    opacity: 1;
		z-index: 800;
	}
	
	#logo {
		margin-left: 5%;
	}
	
	.g-nav {
		width: 500px;
	}
	
	#container {
		padding-top: 70px; 
	}	
}

@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */

	#logo {
		margin-left: 5%;
	}
	
	
}


/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*ここまで全ページ共通*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*TOP INDEX*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/


.bgmost {
	width: 100%;
	height: auto;
	background-color: #fff;
}

.backdrop:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(../img/bg-pic01.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

.main_pic_area {
    width: 100%;
	max-width: 100vw;
    height: 100vh;
	display: block;
    justify-content: center;
}
/*
.main_pic_area {
    width: 100%;
	max-width: 100vw;
    height: 100vh;
    ackground-image: url(../img/bg-pic01.jpg);
    background-size: contain;
	-moz-background-size: cover;
	-webkit-background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    lign-items: center;
    background-attachment: fixed;
}
*/


/*TOP SVGアニメーションここから*/
.svg {
	width: 70%;
	margin: 5vh auto 0;
}



.item01,.item02,.item03,.item04,.item05{
  fill: transparent;
  stroke: yellow; /*#39A555*/
  stroke-dasharray: 1572;/*2572*/
  stroke-dashoffset: 0;
  stroke-width: 2;
  opacity: 1;
}

.item01{
  animation: sandore 5s ease-in 0.6s forwards;
}

.item02{
  animation: sandore 5s ease-in 1.2s forwards;
}

.item03{
  animation: sandore 5s ease-in 1.8s forwards;
}

.item04{
  animation: sandore 5s ease-in 2.4s forwards;
}

.item05{
  animation: sandore 5s ease-in 3.0s forwards;
}

@keyframes sandore {
   0% {
   stroke-dashoffset: 1572;/*2572*/
   fill: transparent;
   opacity: 1;
  }
   40% {
   stroke-dashoffset: 0;
   fill: transparent;
   opacity: 1;
  }
   50% {
   stroke-dashoffset: 0;
   fill: #fff;
   opacity: 1;
  }
   80% {
   stroke-dashoffset: 0;
   fill: #fff;
   opacity: 1;
  }
   95% {
   stroke-dashoffset: 0;
   fill: #fff;
   opacity: 1;/*0でフェードアウト*/
  }
   100% {
   stroke-dashoffset: 0;
   fill: #fff;
   opacity: 1;/*0でフェードアウト*/
  }
}
/*TOP SVGアニメーションここまで*/


.wrap {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 30px;
	display: block;
}

.menu_area,.about_area,
.gallery_area {
    width: 100%;
    height: auto;
    margin: 3em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFBEB;
}

.text_area {
	width:50%;
}


.img_area {
	width:50%;
	height:50%;
}


/*scrollライン*/
.line{
    position: absolute;
    top: 50%;
    right: 1%;
    overflow: hidden;
    overflow-x: hidden;
    color: #22FEFF;
}

 
.line:after{
	content:"";
	display: block;
	width: 1px;
	border-left:2px #22FEFF solid;
	animation:scroll 2s ease 0s infinite normal;
	margin: 0 auto 0;
}


 @keyframes scroll{
	 0%{
		 height: 0;
	 }
	 50%{
		 height: 0px;
		 margin-top: 0;
	 }
	 100%{
		 margin-top: 50px;
		 height: 100px;
	 }
}
/*ここまで*/



/*ホバー時に画像拡大*/
figure {
	overflow: hidden;
}
figure img {
	transition: .3s;
	backface-visibility:hidden;
-webkit-backface-visibility: hidden;
}
a:hover figure img {
	transform: scale(1.2);
	backface-visibility:hidden;
-webkit-backface-visibility: hidden;
}
/*ここまで*/


.wrap_second {
	display: flex;
	flex-direction:column-reverse;
	width: 100%;
}

.andy_area {
    width: 100%;
    height: auto;
    background-color: #FFEC64;
    padding: 2em 0;
}

.yacht_area {
    width: 100%;
    height: auto;
    background-color: #1a3c87;
	padding: 2em 0;
}

.andy_area-box {
    width: 85%;
    border: 1px solid #266a40;
    margin: 0 auto;
}

.yacht_area-box {
	width: 85%;
	border: solid 1px #fff;
	margin: 0 auto;
}

.icon_svg {
	width: 100px;
	height: 100px;
	margin: 3em auto 2em;
}

.andy_area-box h2,
.yacht_area-box h2 {
	font-size: 1.5em;
	text-align: center;
	padding-bottom: 1em;
	color: #fff;
}
.andy_area-box>h2 {
	font-family: "Nico Moji";
	font-size: 1.5em;
	color: #266a40;
}

.andy_area-box p,
.yacht_area-box p {
	font-size: 1em;
	text-align: center;
	padding: 0 2em 2em;;
	line-height: 1.3em;
	letter-spacing: 0.1em;
}

.andy_area-box p{
    color: #266a40;
}

.yacht_area-box p {
	color: #fff;
}

.andy_area-box .button p {
    font-size: 0.8em;
    color: #266a40;
}

.yacht_area-box .button p {
	font-size: 0.8em;
	color: #1a3c87;
}

/*あんでぃ店 ｌearn more ボタン*/
.btn-1{
	line-height: 1;
  	text-decoration: none;
	background: #fff;
	color: #266a40 !important;
	border-radius: .5em;
	padding: 0.8em 1.3em;
	text-align: center;
	position: relative;
  	transition: .3s;
}

.btn-1:after{
	content:"";
	position:absolute;
	top:0;
	bottom: 1px;
	right:1%;
	margin:auto;
	width: 5px;
	height: 5px;
	border-top: 2px solid #266a40;
	border-right: 2px solid #266a40;
	transform: rotate(45deg);
	transition:.3s;
}

.btn-1:hover:after{
	right: -5px;
}

/*   ここまで   */
/*ヨットセーリング ｌearn more ボタン*/
.btn-2{
    line-height: 1;
    text-decoration: none;
    background: #fff;
    color: #1a3c87 !important;
    border-radius: .5em;
    padding: 0.8em 1.3em;
    text-align: center;
    position: relative;
    transition: .3s;
}

.btn-2:after{
	content:"";
	position:absolute;
	top:0;
	bottom: 1px;
	right:1%;
	margin:auto;
	width: 5px;
	height: 5px;
	border-top: 2px solid #68CDF2;
	border-right: 2px solid #68CDF2;
	transform: rotate(45deg);
	transition:.3s;
}

.btn-2:hover:after{
	right: -5px;
}

/*   ここまで   */







.info {
	width: 100%;
	height: auto;
	margin: 0px auto 100px;
	padding-bottom: 0px; /*もっと見るを入れる場合は0 無しは150px*/
}

.info .midashi>p {
	text-align: center;
	font-size: 2em;
	padding: 1em;
}

dl {
	width: 80%;
	height: auto;
	margin: 0 auto ;
	padding-bottom: 50px;
}
dl dt {
	display: block;
	width: 15%;
	clear: both;
	float: left;
	padding-bottom: 2em;
	line-height: 1.5em;
}
dl dd {
    display: block;
    width: 65%;
    float: right;
    padding-bottom: 2em;
    line-height: 1.5em;
    letter-spacing: 0.1em;
}

dl dd a {
	color: #06c;
	border-bottom: #fff solid 1px;
	transition: all .5s ease; 
}

dl dd a:hover {
	border-bottom: #06c solid 1px;
}


.info-area-more {
	width: 150px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 50px;
}

.info-area-more>p {
	text-align: center;
	font-size: 0.8em;
	padding: 1em;
}


/*top category view more ボタン*/
.btn_a{
	line-height: 1;
  	text-decoration:none;
	background: #fff;
	color:#257EC8 !important;
	padding:1em 1.5em 1.1em;
	text-align: center;
	position: relative;
  	transition:.3s;
	z-index: 500;
}

.btn_a:after{
	content:"";
	position:absolute;
	top:0;
	bottom: 1px;
	right:5%;
	margin:auto;
	width: 5px;
	height: 5px;
	border-top: .05em solid #257EC8;
	border-right: .05em solid #257EC8;
	transform: rotate(45deg);
	transition:.3s;
}

.btn_a:hover:after{
	right: -1em;
}

/*   ここまで   */


/*infomation view all ボタン*/
.btn{
	line-height: 1;
  	text-decoration:none;
	background: #fff;
	color:#000 !important;
	padding:1em 1.5em 1.1em;
	text-align: center;
	position: relative;
  	transition:.3s;
}

.btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom: 1px;
	right:5%;
	margin:auto;
	width: 5px;
	height: 5px;
	border-top: .05em solid #000;
	border-right: .05em solid #000;
	transform: rotate(45deg);
	transition:.3s;
}

.btn:hover:after{
	right: -1em;
}

/*   ここまで   */


@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */
	
	.svg {
		width: 60%;
	}
	
	.wrap {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
	}

	.text_area {
		width: 100%;
		margin: 0 auto;
		padding-top: 1.5em;
		background-color: #FFFBEB;
	}
	
	.img_area {
		width: 100%;
	}
	
	.wrap_second {
		width: 100%;
		display: flex;
		flex-direction: row;
	}
	
	.andy_area,
	.yacht_area {
		width: 50%;
	}

	
	dl {
		width: 500px;
		margin: 0 auto;
	}
	dl dt {
		width: 150px;
	}
	dl dd {
    	width: 340px;
	}

}


@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */
	
	.svg {
		width: 35%;
	}

	
	.wrap {
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.text_area {
		width: 100%;
		margin: 0 auto;
		padding-top: 1.5em;
	}
	
	.img_area {
		width: 100%;
	}
	.wrap_second {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	
	dl {
		width: 600px;
		margin: 0 auto;
	}
	dl dt {
		width: 110px;
	}
	dl dd {
    	width: 480px;
	}
	
}


/*TOP INDEX ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*MENU ABOUT GALLERY 共通ここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/



.page_title-area {
	width: 100%;
	height: 150px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrap_about,
.wrap_gallery {
    width: 100%;
    height: inherit;
    display: block;
}

.about_category_story,
.basic-info {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}


@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */
	
	.menu_area,
	.about_area,
	.gallery_area {
		width: 30%;
		height: auto;
		margin: 50px auto 0;
		display: block;
	}

	.menu_category,
	.about_category {
		width: 60%;
	}

}


@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */
	
	.menu_area,
	.about_area,
	.gallery_area {
		width: 28%;
		display: block;
	}
	
}


/*MENU ABOUT GALLERY 共通 ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*MENU INDEXここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/

/*MENU SVGアニメーションここから*/
.svg_menu {
	width: 120px;
}


.menu_item01,.menu_item02,.menu_item03,.menu_item04{
    fill: #000;
    stroke: #000;
    stroke-dasharray: 3194;
    stroke-dashoffset: 0;
    transition: all .3s;
    transform: translateY(100%);
    stroke-width: 1;
    opacity: 0;
    color: #000000;
}

.menu_item01{
  animation: menu 5s ease 0.4s forwards;
}

.menu_item02{
  animation: menu 5s ease 0.8s forwards;
}

.menu_item03{
  animation: menu 5s ease 1.2s forwards;
}

.menu_item04{
  animation: menu 5s ease 1.6s forwards;
}

@keyframes menu {
   0% {
     opacity: 0;
     transform: translateY(100%);
     stroke: #000;
     fill: #000;
  }
   10% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   25% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   50% {
     opacity: 1;
     transform: translateY(0);
     stroke: #2ef0c9;
     fill: #2ef0c9;
  }
   75% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   92% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   100% {
     opacity: 1;
     transform: translateY(0%);
     stroke: #000;
     fill: #000;
  }
}
/*MENU SVGアニメーションここまで*/


.wrap_menu {
    width: 100%;
    height: inherit;
    display: block;
	background: linear-gradient(#fff, #fff0fe);
	padding-bottom: 30px;
}

.menu_category {
  	width: 90%;
	height: auto;
  	display: flex;
  	flex-wrap: wrap;
	margin: 0 auto;
	padding: 35px 0;
	margin-bottom: 35px;
}

.pr {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 3rem 0 0 1rem;
	color: #449D47;
	font-size: 1em;
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
}

.pr::before {
	content: url(../menu/img/point.png);
	vertical-align: middle;
	padding-right: 5px;
}

.menu_category dt {
	padding: 1em;
  	width: 80%;
  	box-sizing: border-box;
  	border-bottom: 1px solid #ccc;
}

.menu_category dd {
	padding: 1em;
  	width: 20%;
  	box-sizing: border-box;
 	border-bottom: 1px solid #ccc;
}

.menu_category dd::before {
	content: "¥";	
}


@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */


}


@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */
	
	.menu_category{
		width: 800px;
	}
	
}


/*MENU INDEX ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*ABOUT INDEXここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/

/*ABOUT US SVGアニメーションここから*/
.svg_about {
	width: 180px;
}


.about_item01,.about_item02,.about_item03,.about_item04,.about_item05,.about_item06,.about_item07{
    fill: #000;
    stroke: #000;
    stroke-dasharray: 3194;
    stroke-dashoffset: 0;
    transition: all .3s;
    transform: translateY(100%);
    stroke-width: 1;
    opacity: 0;
}

.about_item01{
  animation: menu 5s ease 0.2s forwards;
}

.about_item02{
  animation: menu 5s ease 0.4s forwards;
}

.about_item03{
  animation: menu 5s ease 0.6s forwards;
}

.about_item04{
  animation: menu 5s ease 0.8s forwards;
}

.about_item05{
  animation: menu 5s ease 1.0s forwards;
}

.about_item06{
  animation: menu 5s ease 1.4s forwards;
}

.about_item07{
  animation: menu 5s ease 1.6s forwards;
}

@keyframes about {
   0% {
     opacity: 0;
     transform: translateY(100%);
     stroke: #000;
     fill: #000;
  }
   10% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   25% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   50% {
     opacity: 1;
     transform: translateY(0);
     stroke: #2ef0c9;
     fill: #2ef0c9;
  }
   75% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   92% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   100% {
     opacity: 1;
     transform: translateY(0%);
     stroke: #000;
     fill: #000;
  }
}
/*ABOUT US SVGアニメーションここまで*/

.flex {
	display: flex;
	flex-direction: column;
}

.box {
	display: block;
	width: 100%;
}

.about_img_area {
	width: 100%;
}

.about_category {
  	width: 90%;
	height: auto;
  	display: flex;
  	flex-wrap: wrap;
	margin: 0 auto;
	padding: 35px 0;
	margin-bottom: 35px;
}

.about_category dt {
	padding: 1em;
  	width: 30%;
  	box-sizing: border-box;
  	border-bottom: 1px dotted #ccc;
}

.about_category dd {
	padding: 1em;
  	width: 70%;
  	box-sizing: border-box;
 	border-bottom: 1px dotted #ccc;
}

.about_img_area-2 {
	width: 100%;
}

.basic-info {
	margin-bottom: 70px;
}

ul.horizontal-list {
	height: 300px;
	overflow-x: auto;
	overflow-y: hidden; 
	white-space: nowrap;
	padding-bottom: 50px;
	-webkit-overflow-scrolling: touch;/*スクロールバー消す*/
	-ms-overflow-style: none;
	scrollbar-width: none;/*Firefoxのみスクロールバー消す*/
}



/*swiper-エリアサイズ*/
.mdr{
	margin-bottom: 70px;
}	
.swiper-container{
	text-align: center;
}
.swiper-container .swiper-slide img{
	max-width: 100%;
	height: auto;
}


@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */

	.ft_01 {
		margin: 0 0 0 1em;
	}

	.flex {
		flex-direction: row;
		justify-content: space-around;
	}
	
	.box {
		display: block;
		width: 50%;
	}
	
	.about_img_area {
		width: 30%;
		padding: 0;
	}

}


@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */
	
	.ft_01 {
		margin: 0 0 0 2em;
	}

	.about_category_story,
	.basic_info {
		max-width: 1200px;
		margin: 0 auto 150px;
	}

	.flex {
		flex-direction: row;
		justify-content: space-around;
	}
	
	.box {
		display: block;
		width: 50%;
	}
	
	.about_category {
		width: 800px;
	}
	
	.about_img_area {
		width: 30%;
		padding: 0;
	}
	
}


/*ABOUT INDEX ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*GALLERY  INDEXここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/

/*GALLERY SVGアニメーションここから*/
.svg_gallery {
	width: 180px;
}

.gallery_item01,.gallery_item02,.gallery_item03,.gallery_item04,.gallery_item05,.gallery_item06,.gallery_item07{
    fill: #000;
    stroke: #000;
    stroke-dasharray: 3194;
    stroke-dashoffset: 0;
    transition: all .3s;
    transform: translateY(100%);
    stroke-width: 1;
    opacity: 0;
    color: #000000;
}

.gallery_item01{
  animation: menu 5s ease 0.2s forwards;
}

.gallery_item02{
  animation: menu 5s ease 0.4s forwards;
}

.gallery_item03{
  animation: menu 5s ease 0.6s forwards;
}

.gallery_item04{
  animation: menu 5s ease 0.8s forwards;
}

.gallery_item05{
  animation: menu 5s ease 1.0s forwards;
}

.gallery_item06{
  animation: menu 5s ease 1.2s forwards;
}

.gallery_item07{
  animation: menu 5s ease 1.4s forwards;
}

@keyframes gallery {
   0% {
     opacity: 0;
     transform: translateY(100%);
     stroke: #000;
     fill: #000;
  }
   10% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   25% {
     opacity: 1;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   50% {
     opacity: 1;
     transform: translateY(0);
     stroke: #2ef0c9;
     fill: #2ef0c9;
  }
   75% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   92% {
     opacity: 0;
     transform: translateY(0);
     stroke: #000;
     fill: #000;
  }
   100% {
     opacity: 1;
     transform: translateY(0%);
     stroke: #000;
     fill: #000;
  }
}
/*GALLERY SVGアニメーションここまで*/


.figure_area {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
 	justify-content: center;
	padding: 50px 0;
}

.pic {
	padding: 1em;
	width: 100%;
}

@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */

	.figure_area {
		width: 100%;
	}
	
	.pic {
		padding: 1em;
		width: 30%;
	}
}


@media (min-width:1201px) {
	/* 画面サイズ1201px以上に適用させたいスタイル */
	
	.figure_area {
		max-width: 1200px;
	}
	
	.pic {
		padding: 1em;
		width: 30%;
	}	
}

/*GALLERY INDEX ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/






/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*ARCHIVE  INDEXここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/

.archive-title {
	font-size: 1.8em;
	color: #1a3c87;
	padding: 1em;
}

.by-years {
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 980px;
	margin: 0 auto 5em;
	border: 1px solid #39A555;
	box-sizing: border-box;
}

.by-years h3 {
	text-align: center;
	padding: 1em 0 2em;
	font-size: 1.5em;
}

.by-years dl {
	width: 80%;
	height: auto;
	margin: 0 auto ;
	padding-bottom: 50px;
}

.by-years dl dt {
	display: block;
	width: 15%;
	clear: both;
	float: left;
	padding-bottom: 2em;
	line-height: 1.5em;
}
.by-years dl dd {
    display: block;
    width: 65%;
    float: right;
    padding-bottom: 2em;
    line-height: 1.5em;
    letter-spacing: 0.1em;
}

.by-years dl dd a {
	color: #06c;
	border-bottom: #fff solid 1px;
	transition: all .5s ease; 
}

.by-years dl dd a:hover {
	border-bottom: #06c solid 1px;
}



.back-btn__area {
	width: 200px;
	margin: 0 auto;
	padding-top: 100px;
}

.back-btn {
	width: 200px;
	margin: 0 auto;
	display:inline-block;
    background:#fff;
    padding: 18px 0 15px 10px;
	margin-top: 1em;
    text-align:center;
    color: #ED91A2;
    outline: 1px solid;
	border-radius: 10px;
    cursor:pointer;
    position: relative;
    text-decoration: none;
	font-size: 0.8em;
	vertical-align: middle;
}

.back-btn a {
	width: 180px;
	display: block;
	margin: 0 auto;
}

.back-btn::before{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: 10px;
    width: 10px;
    height: 5px;
    border: none;
    border-left: 2px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(135deg);
    transition: .3s;
}
.back-btn:hover {
	color: #39A555;
}
.back-btn:hover::before{
    left: -10px;
    width: 20px;
}


@media (min-width:769px) and (max-width:1200px) {
	

}



/*ARCHIVE  INDEX ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/





/*ーーーーーーーーーーーーーーーーーーーーーーー*/
/*TOPIXS  PAGEここから*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/


.wrapper {
	width: 90%;
	max-width: 980px;
	margin: 0 auto;
}

.news__head {
	width: 95%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}
.date {
	width: 125px;
	background-color: #fff;
	outline: #39A555 2px solid;
	box-sizing: border-box;
	color: #39A555;
	padding: 1em;
	letter-spacing: 0.25em;
	font-size: 0.8em;
}
.news__head__title {
	padding: 1em 0;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	line-height: 1.8em;
}
.news__head__txt {
	padding: 1em;
	letter-spacing: 0.2em;
	line-height: 1.8em;
	margin: 0 auto;
}
.news__head__img {
	width: 95%;
	margin: 0 auto;
}

.news__head__li__area {
	width: 90%;
	margin: 0 auto;
	padding-left: 2.5em;
}

.news__head__li__area li {
	line-height: 2em;
	letter-spacing: 0.1em;
}

@media (min-width:769px) and (max-width:1200px) {
	/* 画面サイズ769pxから1200pxまでに適用させたいスタイル */

	.news__head__img {
		max-width: 980px;
		margin: 0 auto;
	}
	
}

/*TOPIXS  PAGE ここまで*/
/*ーーーーーーーーーーーーーーーーーーーーーーー*/