@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Shippori+Mincho:wght@400;500;600&display=swap');

:root{
	--fontFamilyMin : 'Shippori Mincho', serif;
}

@charset "UTF-8";
/*--------------------------------------------
DATA TEXT
---------------------------------------------*/
[data-before]:before{
	content : attr( data-before );
}
[data-after]:after{
	content : attr( data-after );
}
/*--------------------------------------------
WRAP OVER
---------------------------------------------*/
@media screen and (max-width:1439px){
}
/*--------------------------------------------
MAP
---------------------------------------------*/
.map-container{
	position : relative;
}
.map-container > #map , .map-container > iframe{
	width : 100%;
	height : 100%;
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	margin : auto;
}
img{
	height : auto;
	vertical-align : top;
	outline : none;
}
@media screen and (max-width: 768px){
	img{
		width : 100%;
	}
}
@media print, screen and (min-width: 769px){
	img{
		max-width : 100%;
	}
}
@media print, screen and (min-width: 769px){
	.is-sp{
		display : none;
	}
}
@media screen and (max-width: 768px){
	.is-pc{
		display : none;
	}
}
/*--------------------------------------------
FONTS
---------------------------------------------*/
.rato{
	font-family : "Lato", sans-serif;
}
.ryumin{
	font-family : "リュウミン R-KL","Ryumin Regular KL" , "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media print, screen and (min-width: 1440px){
	a[href^="tel"]{
		pointer-events : none;
	}
}
/*--------------------------------------------
BOX
---------------------------------------------*/
.box.white{
	background-color : rgba(255,255,255,.8);
}
/*--------------------------------------------
TITLE
---------------------------------------------*/
.title01{
    font-family: var(--fontFamilyMin);
    font-feature-settings:palt !important;
}
@media screen and (max-width: 768px){
	.title01{
		font-size : calc( 55 * 100vw / 768 );
        margin-bottom: calc( 40 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1439px){
	.title01{
		font-size : 45px;
        margin-bottom: 20px;
	}
	.title01 .mini{
		font-size : 30px;
	}  
}
@media print, screen and (min-width: 1440px){
	.title01{
		font-size : 60px;
        margin-bottom: 20px;
	}
	.title01 .mini{
		font-size : 45px;
	}    
}

.title02{
    text-align : center;
    letter-spacing : .1em;
    color : #222;
}
.title02:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
	background-color : #bab4ae;
}
.al-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.txt-center {
    text-align: center;
}
@media screen and (max-width: 768px){
	.title02{
		font-size : calc( 40 * 100vw / 768 );
	}
	.title02:after{
		margin-top : calc( 23 * 100vw / 768 );
		width : calc( 600 * 100% / 768 );
		height : calc( 6 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1439px){
	.title02{
		font-size : 30px;
	}
}
@media print, screen and (min-width: 1440px){
	.title02{
		font-size : 40px;
	}
}
@media print, screen and (min-width: 769px){
	.title02:after{
		margin-top : 23px;
		width : 600px;
		height : 4px;
	}
}
/*--------------------------------------------
TEXT
---------------------------------------------*/
.text{
	letter-spacing : .1em;
}
@media screen and (max-width: 768px){
	.text , #contents p{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 2.0;
	}
}
@media print, screen and (min-width: 769px){
	.text , #contents p{
		font-size : 16px;
		line-height : 2.0;
	}
}
/*--------------------------------------------
LIST
---------------------------------------------*/
.listBlock{
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
}
.listBlock a{
	width : 100%;
	height : 100%;
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	color : #fff;
	font-weight : 500;
	line-height : 1.2;
}
@media screen and (max-width: 768px){
	.listBlock{
		-ms-flex-wrap : wrap;
		    flex-wrap : wrap;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	.listBlock li{
		width : calc( 360 * 100% / 736 );
		height : calc( 360 * 100vw / 768 );
	}
	.listBlock li:nth-child(n+3){
		margin-top : calc( 14 * 100vw / 768 );
	}
	.listBlock a{
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		font-size : calc( 26 * 100vw / 768 );
	}
    .box-flex {
        display: flex;
    }
}
@media print, screen and (min-width: 769px){
	.listBlock > li{
		width : 163px;
		height : 163px;
	}
	.listBlock > li + li{
		margin-left : 3px;
	}
	.listBlock a{
		-webkit-box-align : end;
		-ms-flex-align : end;
		align-items : flex-end;
		font-size : 16px;
		padding-bottom : calc( 9px - 1.6px );
	}
    .box-flex {
        display: flex;
    }
}
@media screen and (min-width: 769px) and (max-width:1439px){
	.listBlock a{
		padding-left : 8px;
		padding-right : 8px;
	}
}
@media print, screen and (min-width: 1440px){
	.listBlock a{
		padding-left : 13px;
		padding-right : 13px;
	}
}



/*--font ------------------*/
@media screen and (max-width: 768px){
    .font-tate.sp-on{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
    }    
}
@media print, screen and (min-width: 769px){
    .font-tate{
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
    }
}

/*---box-flex--------------*/

.box-flex {
    
}
@media screen and (max-width: 768px){
}
@media print, screen and (min-width: 769px){
    .box-flex {
        display: flex;
    }
    .gap20{
        column-gap: 20px;
    }
    .flex-al-center {
        align-items: center;
    }
    .flex-al-top {
        align-items: flex-start;
    }
}
@media screen and (min-width: 769px) and (max-width:1439px){
}
@media print, screen and (min-width: 1440px){
}
.w-m1440 {
}
@media screen and (max-width: 768px){
}
@media print, screen and (min-width: 769px){
    .w-m1440 {
        max-width: 1440px;
        margin: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .w-m800 {
        max-width: 800px;
    }
    .w-m1000 {
        max-width: 1000px;
    }
    .w-100p{
        width: 100%;
    }
}


.mb-05em{   
}
.mb-2em{   
}
.mb-30px{   
}
.mb-60px{   
}
.mb-80px{   
}
.mb-100px{   
}
.img-radius {
    border-radius: 20px;
}
.img-radius-mini {
    border-radius: 10px;
}
@media screen and (max-width: 768px){
    .mb-05em{   
        margin-bottom: .5em;
    }
    .mb-2em{   
        margin-bottom: 2em;
    }
    .mb-30px{   
        margin-bottom: calc( 60 * 100vw / 768 );
    }
    .mb-60px{   
        margin-bottom: calc( 120 * 100vw / 768 );
    }
    .mb-80px{   
        margin-bottom: calc( 160 * 100vw / 768 );
    }
    .mb-100px{   
        margin-bottom: calc( 200 * 100vw / 768 );
    }
    .img-radius {
        border-radius: 20px;
    }
    .img-radius-mini {
        border-radius: 10px;
    }
}
@media print, screen and (min-width: 769px){
    .mb-05em{   
        margin-bottom: .5em;
    }
    .mb-2em{   
        margin-bottom: 2em;
    }
    .mb-30px{   
        margin-bottom: 30px;
    }
    .mb-60px{   
        margin-bottom: 60px;
    }
    .mb-80px{   
        margin-bottom: 80px;
    }
    .mb-100px{   
        margin-bottom: 100px;
    }
    .img-radius {
        border-radius: 20px;
    }
    .img-radius-mini {
        border-radius: 10px;
    }
    
}

.fluid {
  width:50vh;/*横幅*/
  height: 28vh;/*縦幅*/
  background:#fdeadf;/*背景色*/
  animation: fluidrotate 60s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate {  
	  
    0%, 100% {
        border-radius: 29% 71% 30% 70% / 48% 39% 61% 52% 
    }
    14% {
        border-radius: 50% 50% 71% 29% / 32% 61% 39% 68%
    }
    28% {
        border-radius: 39% 61% 55% 45% / 53% 33% 67% 47% 
    }
    42% {
        border-radius: 59% 41% 67% 33% / 29% 56% 44% 71% 
    }
    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
	  
}

.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


/*== 矢印の線がループして伸縮 */

.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
  position:relative;
    /*リンクの形状*/ 
  color:#669306;
    padding: 3px 0 10px 0;
  display:inline-block;
    text-decoration: none;
    outline: none;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #669306;
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid #669306;
    border-right: 1px solid #669306;
    transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 2s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}