@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.5 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 500;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
    background-image : url(../img/doodad.png)
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}

.container{
  width: 100%;
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
}

.message{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  font: 14px/1.5;
  font-weight: 550;
  color:#333;
  padding: 10px 0 25px 0;
}

.message img{
  width: 90%;
}

.lesson{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  padding: 10px 0 25px 0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.lesson img{
  width: 90%;
}

.bnner{
    box-sizing: border-box;
    position: relative;
    margin-bottom: 40px;
    background-color: #fff;
    padding: 5px 0 10px 0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.other{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
  padding: 10px 0 0 0;
}

.other img{
  width: 90%;
}

/* ヘッダー
------------------------------------------------------------*/
#mainnav a{
	color: #000;
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}


/*========================
　フッターエリア
　========================*/

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#footer01 {
  position: relative;
  background: #eedcb3;
}
 
#footer01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #111;
}
 
#footer01 .logo a {
  display: inline-block;
}
 
#footer01 .logo img {
  width: 80px;
}
 
#footer01 .navy a {
  display: block;
  padding: 0 10px;
  color: #222222;
}

#footer01 .address {
  color: #222222;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 17px;
  text-align: center;
}

#footer01 .snsimg {
    width: 250px;
    margin: 0 auto;
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
 
@media only screen and (max-width: 767px) {
  //SPのみ
  #footer01 {
    text-align: center;
  }
 
  #footer01 .navy li {
    border-top: 1px solid #222222;
  }
 
  #footer01 .navy li:last-child {
    border-bottom: 1px solid #222222;
  }
 
  #footer01 .navy li a {
    padding: 12px 20px;
    text-align: left;
  }
  
  #footer01 .copyright {
    color: #222222;
    font-size: 10px;
    text-align: center;
  }
}

/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
}

img{
	max-width: 100%;
	height: auto;
}

section{
  clear: both;
}

section h2{
	width: 60%;
	margin: 70px auto;
	font-size: 1.6rem;
	font-weight:normal;
	text-align: center;
}

.inner{
	width: 100%;
	margin: 0 auto;
	padding-bottom: 10px;
}

#sec03 .inner, #sec04 .inner{
	border-bottom: 1px solid #a0a0a0;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}


/* SEC02 MESSAGE
------------------------------------------------------------*/
.wrap{
	clear: both;
	width: 100%;
	background: #f6f6f6;
}

.bg{
	line-height: 0;
}

.txt h2{
	padding: 0 0 20px !important;
}


/* SEC03 BRAND
------------------------------------------------------------*/
.col4 .img{
	margin: 0 auto;
}



/* SEC04 PROJECT
------------------------------------------------------------*/
#sec04{
	padding-bottom: 0 !important;
}

.article{
	clear: both;
	overflow: hidden;
	padding-bottom: 50px;
}

.article img{
	float: left;
	margin: 5px 20px 20px;
}

.article p{
	margin-bottom: 20px;
}



/* RESPONSIVE 設定
------------------------------------------------------------*/


@media only screen and (max-width: 767px){
	#sidebar{
		position: fixed;
		width: 100%;
		z-index:500;
	}
	
	#sidebarWrap{
		position: relative;
		width: 100%;
		height: 45px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	
	#sidebar h1{
		text-align: center;
		padding-top: 8px;
	}
	
	#sidebar h1 img{
		width: auto !important;
		max-height: 30px;
	}
	
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -10px;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display: block;
		padding: 15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}
	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainnav #sns li{
		display: inline-block;
	}
	#mainnav #sns li a{
		position: relative;
		display: inline-block;
		padding: 15px 10px 0;
		border: 0;
	}
	#mainnav #sns li a:before{
		border: 0;
	}
	.col4 li{
		margin: 0 auto 50px;
		display: block;
		text-align: center;
	}
	section h2{
		margin: 15px auto;
	}
}

/*
content
==============================================================================
*/

/* コンテンツボックス */
.contents-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contents-box {
	margin-bottom: 1rem;
	padding: 1rem;
	width: 45%;
}

.contents-box img {
	margin-bottom: 1rem;
	width: 100%;
	height: auto;
}

.contents-box h2 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
	text-align: center;
}

/* コンテンツボックス3列 */
.contents-wrap2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contents-box2 {
	margin-bottom: 1rem;
	padding: 1rem;
	width: 29%;
}

.contents-box2 img {
	margin-bottom: 1rem;
	width: 100%;
	height: auto;
}

.contents-box2 h2 {
	margin-bottom: 2rem;
	font-size: 1.8rem;
	text-align: center;
}

/* コンテンツボックス2列パート2 */
.contents-wrap3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contents-box3 {
	margin-bottom: 1rem;
	padding: 1rem;
	width: 47%;
}

.contents-box3 img {
	margin-bottom: 1rem;
	width: 100%;
	height: auto;
}

.contents-box3 h2 {
	margin-bottom: 2rem;
	font-size: 2.0rem;
	text-align: center;
}


/*
etc
==============================================================================
*/

/*==================================================
ボタン種類
===================================*/

.gradient4{
    /*ボタンの形状*/
    display: inline-block;
    padding: 15px 40px;  
    border-radius:30px;
    background: #ff8815 url(../img/2023arrow01.png) 96% center/6px no-repeat;
    text-decoration: none;
    color: #fff;
    outline: none;
}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover{
    /*ボタンの形状*/
    border-color:transparent;
    color: #fff;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #fa6c9f 0%, #ffe140 50%, #ff357f 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/   
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}

.gradient3{
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 25px;  
    border-radius:30px;
    background: #ff8815 url(../img/2023arrow01.png) 96% center/6px no-repeat;
    text-decoration: none;
    color: #fff;
    outline: none;
    margin: 5px 10px 0 0;
}


/*==================================================
スライドショー
===================================*/

/*== スライドショー */
.xslider_wrap {
	display: flex;
	overflow: hidden;
	background: #fffff;
	padding: 30px 0 10px 0;
}

.xslider1 , .xslider2 {
	display: inline-flex;
	flex: none;
	animation: xslider 60s 2s linear infinite;
}

.xslider_wrap:hover div {
	animation-play-state: paused!important;
}

.xslider1 div , .xslider2 div {
	flex: none;
	padding: 10px;
}

.xslider1 div:hover , .xslider2 div:hover {
	transform: translateY(-5px);
}

@keyframes xslider {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-100%);
	}
}

/*== 画像丸み */
.effect1 img {
    border-radius: 15px;
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
  animation-name:rotateXAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
  from{
    transform: rotateX(0);
    opacity: 0;
    }
  to{
    transform: rotateX(-360deg);
    opacity: 1;
    }
}

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* Z 軸（左へ） */
.rotateLeftZ{
  animation-name:rotateLeftZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
    }
}

/*　Z 軸（右へ） */
.rotateRightZ{
  animation-name:rotateRightZAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
  from{
    transform: rotateZ(0);
    opacity: 0;
    }
  to{
    transform: rotateZ(360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  opacity: 0;
  }

  to {
    transform: scale(1);
  opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.2);
  opacity: 0;
  }

  to {
    transform:scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/*右から*/
.bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

/*下から*/
.bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
  0% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
  50% {
    transform-origin:bottom;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:top;
  }
  100% {
    transform-origin:top;
    transform:scaleY(0);
  }
}

/*上から*/
.bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
  0% {
    transform-origin:top;
    transform:scaleY(0);
  }
  50% {
    transform-origin:top;
    transform:scaleY(1);
  }
  50.001% {
    transform-origin:bottom;
  }
  100% {
    transform-origin:bottom;
    transform:scaleY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}

.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  background: #666;
  color: #fff;
  box-sizing:border-box;
}

.bgextend,
.lineTrigger{
  width: 220px;
  padding: 20px;
    margin: 0 20px 20px 20px;
  box-sizing:border-box;
}



/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}


/*========= 予約フォームのCSS ===============*/
.form{
	display: flex;
	justify-content: center;
  }

.form li {
	width: calc(50%/2);/*←画像を横に4つ並べる場合*/
	padding:0 5px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
  }

.form li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

/*==================================================
マーカー（アニメーション）
===================================*/

/*アニメーション前*/
.marker {
  padding: 0 5px;
  background-image: linear-gradient(#ffcffb, #ffcffb);
  background-size: 0 50%;/*幅をゼロにしておく*/
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: .8s;
}

/*アニメーション後*/
.marker.actv {
  background-size: 100% 50%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}


/*===========================
　smartphone　bottom menu
　========================*/


.mini-text{font-size:8px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:50px;/*高さ*/
    margin:0;
    padding:0;
    background-color:#f5f5f5;/*背景色*/
    border-top:1px solid #808080;/*バーの上の線*/
    border-bottom:1px solid #808080;/*バーの下の線*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:25%;
    background-color:#f5f5f5;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:20px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#525252;/*アイコン＆文字の色*/
    padding-top:8px;
    padding-bottom:8px;
    line-height:14px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}

/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*展開メニューの文字サイズ*/
        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 47px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;}

.wrap {
  text-align: center;
}


/*========================
　flexbox
　========================*/
.wwrap {
  display:flex;
}

.contents {
  padding:1em;
  background-color:#FFCC80;
  margin:0.5em auto;
  width:80%;
}

.exampleone {
  background-color: teal;
}

/*========================
　Tab
　========================*/

section.typeA{
	display: flex;
	flex-wrap: wrap;
	width: 90%
	margin-right: auto;
    margin-left: auto;
    padding: 16px 16px;
}

}
section.typeA::after {
	content: '';
	width: 100%;
	height: 3px;
	order: -1;
	display: block;
	background: rgba(0,137,167,.7);
}
section.typeA .tabLabel {	/* タブ */
    font-size: 16px;
	text-align: center;
	align-items: center;
	padding: 15px;
	flex: 1;
	order: -1;
	border-radius: 3px 3px 3px 3px;
	color: #444;
	background: rgba(0,137,167,.3);
	transition: .5s ;
	border-left: 2px solid #fd8926;
}
section.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
section.typeA input {		/* ラジオボタン非表示 */
	display: none;
}
section.typeA .content {	/* 本文 */
	width: 90%;
	height: 0;
	overflow: hidden;
	opacity: 0;
	background: #fff;
}
/*アクティブ設定*/
section.typeA input:checked + .tabLabel {
	color: #fff;
	background: rgba(0,137,167,.7);
}
section.typeA input:checked + .tabLabel + .content {
	padding: 15px;
	height: auto;
	overflow: auto;
    border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	transition: .5s opacity;
	opacity: 1;
}
/*チョボ設定*/
section.typeA input:checked + .tabLabel:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #fd8926;
    border-width: 14px;
    margin-left: -14px;
}
section.typeA input:checked + .tabLabel {
    background: #fd8926;
    position: relative;
}
/*間隔設定*/
section.typeA .tabLabel {
    margin-bottom: 0.8rem;
    border-radius: 0;
}
section.typeA .tabLabel:not(:last-of-type) {
    margin-right: 0;
}
section.typeA .tabLabel {
    background: #eedcb3;
    border-radius: 10px;
    border: 2px solid;
}
section.typeA input:checked+.tab-label+.tab-content {
    text-align: center;
}

section.typeA input:checked + .tabLabel {
    background: #fd8926;
    position: relative;
}

/*==================================================
ハンバーガーメニュー
===================================*/

/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 20px;
  top   : 2px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
  color: #222222;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #BBBBBB;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
  background : #000000;
}
.hamburger span:nth-child(2) {
  top: 20px;
  background : #000000;
}
.hamburger span:nth-child(3) {
  top: 30px;
  background : #000000;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#000000;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#000000;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: #fff;
  text-align: center;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: all 0.6s;
  display: block;
  height: 100%;
  overflow-y: scroll;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}


/* メニューmain　*/
.gl-mainmenu {
    background-color: #eedcb3;
    padding: 7vw 4vw 4.5vw;
    margin: 20vw 3vw  5vw;
    color: #FFF;
    text-align: center;
    position: relative;
    border-radius: 10px;
}

img.gl-topimg {
    position: absolute;
    top: -17vw;
    left: 50%;
    transform: translateX(-50%);
    /* width: 30%; */
    width: auto;
    height: 23vw;
}

.gl-mm-cols {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin: 0;
    font-weight: bold;
}

.gl-mm-col {
    flex: 100%;
    max-width: 43%;
    padding: 5px 5px;
    border: 1px solid #fff;
    position: relative;
    margin: 5px auto;
    border-radius: 10px;
    background-color: #fff;
    color: #252525;
}

.gl-mm-col img {
    height: 25vw;
    width: auto;
}

.div-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.gllink {
    margin: 10px auto;
    text-align: center;
    position: relative;
}

.gl-btmmenu {
    text-align: center;
    border-radius: 10px;
    padding: 8vw 2vw 2vw;
    margin: 7vw 3vw 7vw;
    position: relative;
}

.gl-btm-btn {
    width: 88%;
    color: #252525;
    background-color: #fff;
    padding: 15px 10px;
    margin: 8px auto;
    position: relative;
    font-size: 3vw;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    font-size: 4vw;
}

.gl-btm-btn2 {
    width: 58px;
    height: 45px;
    color: #252525;
    background-color: #fff;
    padding: 15px 10px;
    margin: 8px auto;
    position: relative;
    font-size: 3vw;
    text-align: center;
    border-radius: 50px;
    font-weight: bold;
    font-size: 6vw;
}


/*==================================================
お知らせコンテナ
===================================*/

.eventreport {
    padding: 10px 18px 0;
}

.eventreport {
    box-sizing: border-box;
    position: relative;
    margin-bottom: 40px;
    background-color: #fff;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    width: 90%;
    margin-right: auto;
    margin-left: auto;

}

.eventreport .eventreportTitle h2 {
    padding: 0 0 0 30px;
}

.eventreport h2 {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0 10px 30px;
    margin-left: 0;
    background-size: 36px;
}

.eventreport .eventreportTitle a {
    font-size: 0.8em;
    margin-top: -0.3em;
    padding-left: 10px;
    cursor: pointer;
    display: inline-block;
    color: #fff;
    background: #e6c06f;
    box-shadow: 0 2px 0 #be8200;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.8em;
    font-weight: bold;
    border: none !important;
    position: absolute;
    top: 16px;
    right: 10px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
}

.eventreport .visual {
    padding-top: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    display: block;
}

.eventreport .visual img {
    display: block;
    width: auto;
    height: 110px;
    margin: 0 auto;
}

.eventreport .visual div {
    position: relative;
    width: 140px;
    height: 110px;
    float: left;
    overflow: hidden;
    background: #f1f1f1;
}

.eventreport .visual p {
    width: calc(100% - 165px);
    padding-left: 5%;
    float: left;
    padding-top: 15px;
    font-size: 14px;
    overflow: hidden;
}


/*========================
　色マーカー
　========================*/

.mkYL { background: linear-gradient(rgba(255, 255, 255, 0) 60%, #F7FD9B 70%); }
.mkPN { background: linear-gradient(rgba(255, 255, 255, 0) 60%, #FBD4E6 70%); }
.mkGR { background: linear-gradient(rgba(255, 255, 255, 0) 60%, #B5F8D9 70%); }
.mkBL { background: linear-gradient(rgba(255, 255, 255, 0) 60%, #BFE1FC 70%); }


/*========================
　動画
　========================*/
video {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: auto;
}

/*========================
　モーダルウィンドウ
　========================*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #f4f4f4;
  margin: 30% auto;
  width: 70%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

.modal-header h1 {
  margin: 1rem 0;
  font-size: 1.1rem;
}

.modal-header {
  background: #f7c8db;
  padding: 3px 15px;
  display: flex;
  justify-content: space-between;
}

.modalClose {
  font-size: 2.5rem;
}

.modalClose:hover {
  cursor: pointer;
}

.modal-body {
  padding: 10px 15px;
  color: black;
}

.modal-cols {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin: 0;
    font-weight: bold;
}

.modal-col {
    flex: 100%;
    max-width: 43%;
    padding: 5px 5px;
    border: 1px solid #fff;
    position: relative;
    margin: 5px auto;
    border-radius: 10px;
    background-color: #fff;
    color: #252525;
}

.modal-col img {
    width: auto;
}

.modal-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/*========================
　ニュース記事のCSS 
　========================*/
.sub_ttl {
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
}

.news_list {
  margin: 0 5%;
}

.news_list_item {
  padding: 15px 0;
  border-bottom: 1px solid #E6E6E6;
}

.news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
.news_list_item a {
 position: relative;
 display: flex;
 padding-right: 30px;
}

.news_list_date {
  font-size: 15px;
  color: #4d4949;
  display: flex;
  padding: 7px 0;
  margin-right: 15px;
  align-items: center;
}

.news_item {
  background: #F6C6A2;
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 20px;
}

.arrow {
  width: 25px;
  height: 1px;
  background: #707070;
  position: absolute;
  top: 50%;
  right: 0;
}

.arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 1px;
  background: #707070;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  bottom: 2px;
}


@media screen and (max-width: 1024px) {
    .news_list_item a {
        display: block;
    }
}

@media screen and (max-width: 769px) {
    .news_list_item a  {
        font-size: 14px;
    }


}
@media screen and (max-width: 480px) {
    .arrow {
        display: none;
    }
    .news_list_item a {
        padding-right: 0;
    }
}

/*========================
　横スクロール禁止 
　========================*/
html {
	overflow-x: hidden;
}