@charset "utf-8";
@import url("normalize.css");
/*
 * base CSS
 * ---------------------------------------------
 * レスポンシブ等、共通レイアウトに関わるCSS
 */
/* link */
a {
  color: #333;
  text-decoration: underline;
}
a:visited {
  color: #333;
  text-decoration: underline;
}
a:hover, a:focus, a:active {
  color: #333;
  text-decoration: none;
}


.txtLeft{text-align:left;}
.has-text-align-left{text-align:left;}
.txtRight{text-align:right;}
.has-text-align-right{text-align:right;}
.txtCenter{text-align:center;}
.has-text-align-center{text-align:center;}

.imgRight{float:right;padding-left:2em;}
.imgLeft{float:left;padding-right:2em;}
.size-full{width:100%;height:auto;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}

.clear_both{clear:both;}

.txtLarge{font-size:120%;}
.txtSmall{font-size:80%;}
.txtBold{font-weight:700;}

.noto{font-family: 'Noto Sans JP', sans-serif;}
.noto-s{font-family: 'Noto Serif JP', serif;}
.mpr {
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
  font-weight:500;
}




.f_left{float:left;}
.f_right{float:right;}

/* clear, clearfix */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* row */
.row {
  width: 100%;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

.row .col {
  display: block;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-left: 2.7624309392265194%;
  *margin-left: 2.709239449864817%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row .col:first-child {
  margin-left: 0;
}

.row2 .col {
  width: 48.61878453038674%;
  *width: 48.56559304102504%;
}

.row3 .col {
  width: 31.491712707182323%;
  *width: 31.43852121782062%;
}


	/* loading */
	.loading-wrap {
	  position: fixed;
	  height:100vh;
	  width:100vw;
	  background-color:#ffffff;
	  border:none;
		  left: 0px;
		  top: 0px;
		  z-index: 999999999;
		  width: 100%;
		  height: 100%;
		display: grid;
		place-content: center center; 
		justify-content: center center;
		place-items: center center;
		}
	.loading-anime {
		  animation-name: loadinganime;
		  animation-timing-function:ease;
		  animation-duration: 3s;
		  animation-fill-mode: forwards;
		}
	@keyframes loadinganime {
		  from {
			transform: translateY(0);
			  opacity: 100%;
		  }
		  80% {
			  opacity: 100%;
		  }
		   99.999% {
			transform: translateY(0);
		  }   
		  to {
			transform: translateY(100%);
			  opacity: 0%;
		  }
			
		}
		.loading-animation img{
			width:260px;height:auto;}

		
@media screen and (max-width: 80em) {
	.loading-animation img{
		width:160px;height:auto;}
}



.loading-animation p{line-height:2em;margin-bottom:1em;}


/*1.一文字ずつ表示定*/
.txt_animation {opacity: 0;}
.txt_animation span{opacity: 0;}

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0px);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(100px);}
.slide-left {transform: translateX(-100px);}




/* layout */
html {
  overflow-y: scroll;
  overflow-x: hidden;
  height:100%;
  font-size: 19px;
  padding:0px;
  margin:0px;
}

body {
  color: #333333;
  height:100%;
  word-break: break-all;
  padding:0px;
  margin:0px;
}


section{clear:both;}
.sp{display:none;}
.pc{display:block;}

/* bg */
.toppage {background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-position: center 150px;
background-size: 1600px auto ;

}


.page {background-image: url(../images/page_bg.png);
background-repeat: no-repeat;
background-position: center 20px;
background-size: 1600px auto ;

}


/* header */

.toppage #header 
{
width:100%;
padding:30px 0px 0px 0px;
}

.page #header 
{
position: fixed;
width:100%;
padding:0px 0px 0px 0px;
top:0px;
margin:0px;
}
.page #header.is-animation
{background-color: #fff;}

.page #h_inner{max-width:1200px;width:100%;position: relative;text-align:center;
margin:0px auto 0px auto;height:auto;padding:0px;}

#h_inner{max-width:1200px;width:100%;position: relative;text-align:center;
margin:0px auto 0px auto;height:auto;}

#header h1
{padding-bottom:0px;
line-height: 0px;
margin:0px;
padding:0px;
}


.page .btn_area{margin:80px 0px 0px 0px;}

#header h1 img
{display:block;
width:80%;
max-width:800px;
height:auto;
margin:0px auto 0px auto;
padding-bottom:0px;
}


.page #header.is-animation h1 img
{display:block;
width:70%;
max-width:700px;
height:auto;
margin:0px auto 0px auto;
padding-bottom:0px;
}
.page #header.is-animation
{box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);}


/* mainvisual */
#mainvisual{max-width:1000px;width:100%;margin:200px auto 50px auto;
}
.m_txt {text-align: center;}
.m_txt img{width:80%;height:auto;margin:0px auto;}
.m_massage{  
  display: flex;
  gap: 20px;
margin:20px 20px 0px 20px;}
.m_massage div img{width:100%;height:auto;}
.m_massage div.mm01,.m_massage div.mm04{margin-top:20px;}

.oshirase_list{  
  display: flex;
  gap: 20px;
margin:0px 20px 0px 0px;}

.oshirase_list div {
  width: calc((100% - 60px) / 4);  /* gap×3 = 60px を引いて4等分 */
}

.oshirase_list time{  
font-size:70%;}

.oshirase_list div figure {    
  aspect-ratio: 5 / 3;      /* 例えば 4:3 の比率に固定 */
  overflow: hidden;
  margin:0px 0px 10px 0px;
  padding:0px;
}

.oshirase_list div figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* トリミングしてフィットさせる */
  object-position: center;  /* 中央を基準に切り抜く（任意） */
  display: block;
}
.contents .oshirase_list p{line-height:1.4em;font-size: 80%;}


.page .oshirase_list div figure{float:left;display:inline-block;width:30%;margin:0px;padding:0px;}

.page .oshirase_list .contents.page_contents img{margin:0px;padding:0px;}

.page .oshirase_list {display:block;}
.page .oshirase_list div {width:100%;margin-bottom:2em;}



/* menu-nav */
#mnav {
display: none;
padding:0px;
margin:0px 0px 0px 0px;
background-color:rgba(255,255,255,1);
z-index:999;
width:100%;
top:0px;
right:0px;
position:absolute;
height:100%;
text-align: center;
background-image:url(../images/img03.png) ;
background-repeat: no-repeat;
background-position: center 98%;
background-size: 30% auto;
z-index:999999999;
	position: fixed;
}



#mnav ul{line-height:1.4em;font-size:1em;
  margin: 40vh auto 0;
	transform: translateY(-50%);
  list-style: none;
  padding:0px;
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
}
#mnav ul li a
{
margin:0px 0px 1.2em 0px;
line-height:1.6em;
display:block;
text-decoration:none;
}



#menu_btn{position: fixed;top:0px;right:10px;z-index:99999999999999999;}


#panel-btn{
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index:99999999;
  cursor: pointer
}
#panel-btn:hover{
}
/* 横棒中央の１本を表示表示 */
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  width: 25px;
  height: 3px;
  margin: 0px 0px 0px -12.5px;
  background: #333;
  transition: 0.2s;
}
 
/* 横棒上下の2本を表示表示 */
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  width: 25px;
  height: 3px;
  background: #333;
  transition: 0.3s;
}
#panel-btn-icon:before{
  margin-top: -8px;
}
#panel-btn-icon:after{
  margin-top:8px;
    width: 15px;
}


#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before{
  margin-top: 0;
}
 #panel-btn .close:after{
  margin-top: 0;
  width: 25px;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}


/* wrap */
#wrap{margin:0px 0px 0px 0px;height:100%;}



.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
}

.swiper-slide:nth-child(3n + 1) {
  /*1、4、7、3n+1枚目の背景色 */

}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8、3n+2枚目の背景色 */

}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9、3n+3枚目の背景色 */

}

/* frontpage */



/* contents */
.bg01
{ background-color: #f5faf2; /* お好きな色 */}
.contents{max-width:1200px;width:90%;margin:0px auto 0px auto;

}
.top_contents01{background-color: #fff;border-radius: 10px;padding:3em 0px 5em 0px;}
.page_contents{background-color: #fff;border-radius: 10px;padding:0px 0px 5em 0px;}
.page .contents_box{max-width:900px;width:90%;margin:0px auto 0px auto; padding:2em 0px 6em 0px; } 

.page_contents .contents {max-width:900px;width:80%;}
.contents_box{max-width:900px;width:90%;margin:0px auto 0px auto; padding:6em 0px 6em 0px; } 
.contents h1{
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 1.7em;
    font-size: 180%;
    letter-spacing: 0.2em;
    margin-bottom:2em;
}

.page .contents h1{
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
    font-weight: 700;
    text-align: center;
    line-height: 1.7em;
    font-size: 180%;
    letter-spacing: 0.2em;
    margin-bottom:2em;
    border-bottom:solid 2px #333;
    padding:0px 0px 0.5em 0px;
}

.page .contents h2{
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
    font-weight: 700;
    line-height: 1.7em;
    font-size: 150%;
    letter-spacing: 0.2em;
    margin-bottom:1em;
    padding:2em 0px 0px 0px;
}


.page .contents h3{
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
    font-weight: 700;
    line-height: 1.7em;
    font-size: 130%;
    letter-spacing: 0.2em;
    margin-bottom:2em;
    border-bottom:solid 2px #333;
    padding:2em 0px 0.2em 0px;
}


.contents p{
	font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
line-height:2.1em;
letter-spacing:0.12em;
margin-bottom:1.8em;
}

.contents ul{margin:0px 0px 3em 0px;letter-spacing:0.1em;}
.contents ul li{list-style: disc; margin-bottom:1em;line-height:1.4em;padding-left:1em;}

.contents ol{margin:0px 0px 3em 0px;letter-spacing:0.1em;}
.contents ol li{list-style: decimal; margin-bottom:1em;line-height:1.4em;padding-left:1em;}

.contents hr{
  display:block;
  width: 50%;
  height: 50px;
  margin-top:90px;
  padding:0px auto 0px auto;
  border-top: 1px solid #ccc;
  border-left:none;
  border-bottom:none;
  border-right:none;
  clear: both;
  background-color: transparent;
}

.contents.page_contents img{width:70%; margin:20px auto 30px auto;}
.contents.page_contents img.img100{width:100%; margin:20px auto 30px auto;}
.contents img{width:70%; margin:0px auto 0px auto;}


.contents h1 a{text-decoration:none;}
.contents h1 a:hover{text-decoration: underline;}

.contents h2 a{text-decoration:none;}
.contents h2 a:hover{text-decoration: underline;}

.contents h3 a{text-decoration:none;}
.contents h3 a:hover{text-decoration: underline;}

.contents table{border-collapse: collapse;
  border-top:solid 1px #999;border-left:solid 1px #999;line-height:1.6em;margin:0px 0px 2em 0px;}
.contents table th{padding:1em;text-align: left;border-right:solid 1px #999;border-bottom:solid 1px #999;line-height:1.6em;}
.contents table td{padding:1em;text-align: left;border-right:solid 1px #999;border-bottom:solid 1px #999;line-height:1.6em;}
.btn_area{padding:1em 0px 1em 0px;text-align: center;}
.btn_area a{text-decoration: none;
	font-family: "Zen Maru Gothic", sans-serif;
 font-weight: 500;
 color:#fff;
 background-color:#754c24;
 display: inline-block;
 padding:0.75em 2em 0.75em 2em;
 border-radius: 2.5em;
 margin:0.5em;
 letter-spacing: 0.1em;
}

.btn_area02{padding:1em 0px 1em 0px;text-align: center;display: block;}
.btn_area02 a{text-decoration: none;
	font-family: "Zen Maru Gothic", sans-serif;
 font-weight: 500;
 color:#fff;
 background-color:#fbb03b;
 display: inline-block;
 padding:0.75em 2em 0.75em 2em;
 border-radius: 2.5em;
 margin:0.5em;
 letter-spacing: 0.1em;
}

.contents .box01{border:solid 1px #999;
padding:2em 2em 0.5em 2em;margin-bottom:2em;}

.contents .box02{border:solid 1px #999;
padding:2em 2em 2em 2em;margin-bottom:2em;}

.contents .box03{background-color: #f0f8fe;
padding:2em 2em 2em 2em;margin-bottom:2em;border-radius: 10px;}
.contents .box03 h1{margin-bottom:0.2em;}
.contents .box03 p{margin-bottom:0.2em;}

.contents .box04{border:solid 9px #ddedd4;
padding:2em 2em 0.5em 2em;margin:3em 0px 3em 0px;}


.contents .page_back{text-align:center;}
.contents .page_back a{display:inline-block;text-align:center;background-color:#333; padding:0.7em 1em 0.7em 1em;text-decoration:none;color:#fff;margin:2em 0px 2em 0px;}


h2.linkbtn{}
h2.linkbtn a{display:inline-block;background-color:#333; padding:0.3em 0.7em 0.2em 0.9em;text-decoration:none;color:#fff;margin:0em 0px 0em 0px;word-break: break-all;}
h2.linkbtn a:hover{text-decoration:none;}




/* btn */

/* bread */

#bread{float:right;font-size:0.8em;padding:1em 0px 1em 0px;}
#bread li{display:inline-block;padding:0px 0px 0px 1em;}
#bread li a{padding:0px 1em 0px 1em;}
#bread li:after{content:">";}
#bread li:last-child:after{content:"";}
#bread:after{clear:both;}






/* footer  */

#footer{clear:both;
  background-image:url(../images/f_bg.png);
  background-repeat:no-repeat;
  background-size: cover;
  margin:50px 0px 50px 0px;}
#f_inner{max-width:1000px; margin:0px auto 0px auto;
padding:50px 0px 50px 0px;}

.f_link{list-style: none;text-align: center;font-size: 80%;padding:0px;margin:0px;}
.f_link li{display: inline-block;padding:0px 1em 0px 1em;border-right:solid 1px #333;margin:0px 0px 1em 0px;}
.f_link li:last-child{border-right:none;}
.f_link li a{text-decoration: none;}

.f_box{font-size:90%;background-color: #fff;padding:1em 2em 1em 2em;border-radius: 10px;width:60%;margin:0px auto 0px;}
.f_box p{line-height:1.4em;}
/* pagetop */
p#pagetop{
	position: fixed;
	bottom: 30px;
	right: 120px;
	color:"#999";
}
* html p#pagetop{
	text-align:right;
	margin-right:20px;
	margin-bottom:20px;
}
p#pagetop a{text-decoration:none;font-size: 50px;}


/*
 * tablet and smartphone START
 * ---------------------------------------------
 */
@media only screen and (max-width: 990px) {
  /* layout */


}
/*
 * tablet and smartphone END
 * ---------------------------------------------
 */
/*
 * tablet START
 * ---------------------------------------------
 */
@media only screen and (min-width:700px) and (max-width: 999px) {
  /* #header-nav-sp */

#contents{margin:0px 0px 0px 0px;}

#f_inner{max-width:1000px; margin:0px;}	

/* pagetop */
p#pagetop{
	position: fixed;
	bottom: 30px;
	right: 30px;
	color:"#999";
}

}
/*
 * tablet END
 * ---------------------------------------------
 */
/*
 * smart phone START
 * ---------------------------------------------
 */
@media only screen and (max-width: 700px) {


.sp{display:inline-block;}
.pc{display:none;}
.sp_center{text-align: center;}


body {
  font: 13px/1 "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body.mac {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", sans-serif;
}
* html body {font-size: small;}
*:first-child+html body {font-size: small;}
head~/* */body {font-size: small;}
html:not(:target) body {font-size: 13px;}



/* bg */
.toppage {background-image: url(../images/bg_sp.png);
background-repeat: no-repeat;
background-position: center 100px;
background-size: 1300px auto ;

}

/* header */

.toppage #header 
{
width:100%;
padding:10px 0px 0px 0px;
}






  /* row */
  .row .col {
    float: none;
    margin-left: 0;
  }

  .row2 .col {
    width: auto;
  }

  .row3 .col {
    width: auto;
  }

	
/* header */

.page {background-image: url(../images/page_bg.png);
background-repeat: no-repeat;
background-position: center -20px;
background-size: 1600px auto ;
margin-top:-50px;
}


#header {padding:10px 0px 10px 0px;top:0px ;}
#h_inner{margin:0px;}
#header h1 img{width:96%; height:auto;}



.page #header.is-animation h1 img
{display:block;
width:95%;
max-width:700px;
height:auto;
margin:0px auto 0px auto;
padding-bottom:0px;
}
.page #header.is-animation
{box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);}


.page .contents_box{max-width:900px;width:90%;margin:110px auto 0px auto; padding:0px 0px 6em 0px; } 
/* mainvisual */
#mainvisual{max-width:1000px;width:100%;margin:190px auto 50px auto;
}
.m_txt img{width:60%;height:auto;}
.m_massage{  
  display: flex;
  flex-wrap: wrap; 
  gap: 20px;
margin:0px 30px 0px 30px;}
.m_massage div{width: calc(50% - 10px);}
.m_massage div img{width:100%;height:auto;}
.m_massage div.mm01,.m_massage div.mm04{margin-top:0px;}



.oshirase_list{  
  display: flex;
  flex-wrap: wrap; 
  gap: 20px;
margin:0px;}


.oshirase_list div{width: calc(50% - 10px);}



	

/* menu-nav */

	
	
/* frontpage */

input.wpcf7-text{width:100%;}
textarea.wpcf7-textarea{width:100%;}
	
/* mainvisual */


/* wrap */
	
	
/* contents */
.top_contents01{background-color: #fff;border-radius: 10px;padding:1em 0px 2em 0px;margin-top:-30px;}

.contents h1{
    font-size: 130%;
}
.contents_box{width:90%;margin:0px auto 0px auto; padding:3em 0px 2em 0px; } 

.page .contents h1{
	font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: 1.5em;
    font-size: 150%;
    letter-spacing: 0.2em;
    margin-bottom:2em;
    border-bottom:solid 2px #333;
    padding:1em 0px 0.5em 0px;
}


/* footer  */
#f_inner{max-width:1000px; margin:0px auto 0px auto;
padding:20px 0px 20px 0px;}
.f_link li:nth-child(3){border-right:none;}

/* pagetop */
p#pagetop{
	position: fixed;
	bottom: 30px;
	right: 30px;
	color:"#999";
}
* html p#pagetop{
	text-align:right;
	margin-right:20px;
	margin-bottom:20px;
}
p#pagetop a{text-decoration:none;font-size: 50px;}


#mnav {
background-position: center 98%;
background-size: 60% auto;

}

}