@charset "UTF-8";
/*
Theme Name: Tutrial3
Theme URI: http://walkal.com
Description: WP theme for Tutrial
Version: 1.0
Author: Walkal Inc.
Author URI: http://walkal.com/
*/

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}
#container {width:100%;margin:0 auto;padding:0;}
#bgslider{width:75%;min-height:500px;display:flex;padding:0;margin:0 auto;position:fixed;top:60px;}
#bgslider h1{font-size:350%;color:#4E0101;letter-spacing:15px;font-weight:normal;font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height:120%;text-shadow: 0px 0px 5px rgba(17,15,46,0.7);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10% 2% 0 2%;writing-mode:vertical-rl;-ms-writing-mode: tb-rl;width: 25%;background-image: linear-gradient(145deg, rgba(255, 164, 187, .9), rgba(227, 129, 200, 1));position: fixed;right: 0;height: 100vw;}

@media (max-width: 768px){
	#bgslider h1{font-size:3vh;}
}
















#content {width:100%;margin:0;/*padding-bottom:10vh;*/ display:block;position:absolute;overflow:hidden;}
#main {width:100%;padding:0;margin:60px 0 0 0;display:block;background:#FFFFFF;}
#main img {max-width:100%;height:auto;}
.topcontent{width:100%;background:#FFFFFF;padding:2vh 0 5vh 0;margin:0 auto;margin-top:100vh;overflow:hidden;}
.topcontent h3{font-size:135%;font-weight:normal;border-bottom:1px solid #ff7869;letter-spacing:2px;}
.topcontent h3 span{/*border-bottom:3px solid #ff7869;line-height:150%;*/}
.topcontent ul.news{list-style:none;width:90%;margin:0 auto;padding:0;margin-bottom:10%;}
.topcontent ul.news li {border-bottom:dashed 1px #333333;}
.topcontent ul.news li span{background:#AAAAAA;border-radius:3px;margin-left:5px;margin-bottom:5px;padding:3px 10px;font-size:75%;}
@media (max-width: 1024px){
	/*.topcontent{margin-top:50vh;}*/
	#bgslider{width:75%;left:0;}
	.topcontent{margin-top:70vh;}
	.topcontent ul.news{margin-bottom:20%;}
}
@media (max-width: 859px){
	#bgslider{width:100%;}
	.topcontent{margin-top:75vh;}
}
@media (max-width: 500px){
	.topcontent{margin-top:50vh;}
}
@media (max-width: 375px){
	.topcontent{margin-top:65vh;}
}
.more{display:flex;justify-content:flex-end;margin:5% 0;font-size:15px;}
.more a{text-decoration:none;display:inline-block;border-radius:10px;padding:2px 20px;border:1px solid #e564c1;letter-spacing:1px;transition: 0.3s;color:#333333;background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));}
.more a:hover{background-color:#FFFFFF;}

.more2{display:flex;justify-content:center;margin:5%;font-size:15px;}
.more2 a{text-decoration:none;display:inline-block;border-radius:20px;padding:6px 20px;border:1px solid #e564c1;letter-spacing:1px;transition: 0.3s;color:#333333;background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));}
.more2 a:hover{background-color:#FFFFFF;}

footer {width:100%;position:absolute;}
footer ul{list-style:none;display:flex;justify-content:space-evenly;padding:0;margin-top:15px;}
footer ul li{list-style:none;display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:65%;}
footer ul li img{max-width:30px;height:auto;}
#copyright {width:100%;color:#aaaaaa;position: absolute;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;font-size:55%;}
.subfooter_main{width:100%;background-color:#777777;}
.subfooter{width:100%;max-width:1000px;background-color:#777777;color:#DDDDDD;padding:5% 0;display:flex;justify-content:space-around;flex-direction:row;font-size:75%;}
.subfooter ul{list-style:none;padding:0;max-width:48%;margin:1%;}
.subfooter a{color:#DDDDDD;text-decoration:none;}
.subfooter ul li p{color:#DDDDDD;font-size:85%;line-height:150%;padding-top:10px;}
.subfooter a:hover{text-decoration:underline;}
@media (max-width: 768px){
	.subfooter ul{}
}

.clearfix{
  zoom:1;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}


/* header */

header {;position:fixed;z-index:99;}
header h1 {padding:15px 0 2px 20px;}
header h1 img {max-width:100%; height:auto;}
button.drawer-toggle.drawer-hamburger{background-color:#111111;}
#pc_header{width:100%;position:fixed;z-index:95;background-color:#FFFFFF;/*background-image: linear-gradient(300deg, rgba(255, 164, 187, .9), rgba(212, 252, 213, 0.9) 18%, rgba(255, 255, 255, 0.9) 35%);*/box-shadow: 0px 1px 10px -5px #AAAAAA;}
#pc_header ul{list-style:none;display:flex;justify-content:space-evenly;padding:0;height:60px;}
#pc_header ul li{list-style:none;display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:65%;}
#pc_header ul li img{max-width:30px;height:auto;}
#pc_header a{text-decoration:none;color:#333333;}

@media (max-width: 299px){
	#pc_header span{display:none;}
	
}
@media (min-width: 768px){
	/*#header{display:none;}*/
	
}
@media (max-width: 767px){
	/*#pc_header{display:none;}*/
	#pc_header ul{margin-right:60px;}
}




/* header scroll */

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,.9);
  transition: all 0.5s ease;
}

.hidden {
  background: none;
  transition: all 0.5s ease;
}

.spbr {display: none;}
.pcbr {display: inline;}
@media screen and (max-width: 750px) {
  .spbr {display: inline;}
  .pcbr {display: none;}
}

/* contents */
.title_box{width:100%;height:100vh;padding:60px 0 0 0;margin:0;display:flex;justify-content:flex-end;align-items:stretch;/*background:rgba(255,97,97,.1);*/position: fixed;top: 0;}
.title_box h1{font-size:350%;color:#4E0101;letter-spacing:7px;font-weight:normal;font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;line-height:120%;text-shadow: 0px 0px 5px rgba(17,15,46,0.7);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:5% 2% 2% 2%;writing-mode:vertical-rl;-ms-writing-mode: tb-rl;width: 25%;background-image: linear-gradient(145deg, rgba(255, 164, 187, .9), rgba(227, 129, 200, 1));}
@media (max-width: 999px){
	.title_box h1{font-size:250%;padding-top:5%;}
}
@media (max-width: 768px){
	.title_box h1{background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));min-width:25%;}
}
.pc{display:inline;}
.sp{display:none;}
@media (max-width: 750px){
	.title_box h1{font-size:200%;padding-top:5%;}
	.title_box h1 span{display:block;}
.pc{display:none;}
.sp{display:inline;font-family: 'Noto Sans JP', sans-serif; font-size:15px;max-width:98%;}
}

@media (max-width: 430px){
	.title_box h1{font-size:150%;}
}

h2{color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;display:flex;flex-direction:column;align-items:center;padding:0;margin-bottom:3%;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
/*h2 {color:#a98667;font-family: 'Noto Serif JP', serif; text-align:center; padding-bottom:30px; font-weight:normal;font-size:200%;}*/
h3 {text-align:center;margin:2% 0;}
p {color:#111111;font-family: 'Noto Sans JP', sans-serif; line-height:200%; font-size:15px; text-align: justify;}
.text_white{color: #FFF}

article {width:100%;max-width:1000px; height:auto; display:block; margin:0 auto; padding:20px 0; /*border-bottom:#777777 1px dashed;*/}
@media (max-width: 750px){
	article{width:98%;margin:0 auto;}	
}
ul.affiliated{list-style:none;display:flex;flex-wrap:wrap;padding:0;margin:0;}
ul.affiliated li{width:48%;margin:1%;font-size:75%;}
@media (max-width: 768px){
	ul.affiliated li{font-size:60%;}
}

 /* drawer */
button.drawer-toggle.drawer-hamburger {
	background-color:#FFFFFF!important;
    border-bottom-left-radius: 10px;
	/*background-image: linear-gradient(30deg, rgba(255, 164, 187, .9), rgba(255, 255, 255, 0.5) 62%);*/
}
.drawer-nav{background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));}
ul.drawer-menu{margin-top:10%;}
.drawer-menu li {margin-bottom:20px;padding-left:10px;border-left:2px solid #333333;}
.drawer-menu li a {text-decoration:none;color:#333333;}
nav p {color:#FFFFFF;}
.drawer-menu-FC {padding-top: 20px; font-size: 0.8em; border-top:#CCC 1px solid;}
.drawer-menu-FC a {color:#CCC;}

/* form */

iframe {
  border: none;
}

#sub {
      border: none;
	  width:100%;
    }

.kikubtn { color:#FFFFFF; background-color:#000000;}

.reception {
  text-align: center;
}

/* ec */

.ec_btn {
  position: fixed;
  width: 320px;
  bottom: 2%;
  right: 2%;
}
.ec_btn img {width: 100%;}
.ec_btn img:hover {opacity: 0.7;}
.ec_sp {display: none;}
.ec_pc {display: inline;}
@media (max-width: 750px){
  .ec_btn {
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0;
  }
  .ec_sp {display: inline;}
  .ec_pc {display: none;}
  body {padding-bottom: 13%;}
}

/********** ボタン **********/
.button_center {
  text-align: center;
  margin-top: 30px;
}
.button {
	/* お問い合わせボタン */
	display: inline-block;
  width: 560px;
  text-decoration: none;
}
.button .text {
	display: block;
	width: 100%;
	color: #fff;
  font-size: 1em;
	font-weight: bold;
  line-height: 64px;
  letter-spacing: 0.1em;
	text-align: center;
	background: #111;
	transition: .5s;
}
.button:hover .text {
	background: #555;
}

@media screen and (max-width: 640px) {
	.button,.button_fb,.button_ig  {
		width: 100%;
	}
	.button .text {
    font-size: 0.8em;
    line-height: 54px;
	}
}



/**
 * menu
 */
.menu {
	position: relative;
	width: 100%;
	height: 50px;
	max-width: 1000px;
	margin: 0 auto;
}

.menu > li {
	float: left;
	/*width: 25%;*/
	height: 50px;
	line-height: 50px;
	letter-spacing:2px;
	/*background: rgb(29, 33, 19);*/
}

.menu > li a {
	display: block;
	color: #333333;
	text-decoration:none;
}

.menu > li a:hover {
	color: #999999;
}

.menu__none:hover,
.menu__multi:hover,
.menu__mega:hover,
.menu__single:hover {
  /*background: #072A24;*/
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

.menu__second-level li {
  border-top: 1px solid #111;
}

.menu__third-level li {
  border-top: 1px solid #111;
}

.menu__second-level li a:hover {
  background: #111;
}

.menu__third-level li a:hover {
  background: #2a1f1f;
}

.menu__fourth-level li a:hover {
  background: #1d0f0f;
}

.init-bottom:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  *zoom: 1;
}


/**
 * single menu
 */
.menu > .menu__single {
  position: relative;
}

.menu__single .menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  background: #072A24;
  -webkit-transition: .2s ease;
  transition: .2s ease;
  visibility: hidden;
  opacity: 0;
}

.menu__single:hover > .menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}


/**
 * multi menu
 */
.menu > .menu__multi {
  position: relative;
}

.menu__multi .menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  background: #072A24;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

.menu__multi:hover .menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}

.menu__multi .menu__second-level li {
  position: relative;
}

.menu__multi .menu__second-level li:hover {
  background: #111;
}

.menu__multi .menu__second-level li .menu__third-level {
  position: absolute;
  top: -1px;
  left: 100%;
  width: 100%;
  background: #111;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  visibility: hidden;
  opacity: 0;
}

.menu__multi .menu__second-level li:hover .menu__third-level {
  visibility: visible;
  opacity: 1;
}

.menu__multi .menu__second-level li .menu__third-level li {
  position: relative;
}

.menu__multi .menu__second-level li .menu__third-level li:hover {
  background: #2a1f1f;
}

.menu__multi .menu__second-level li .menu__third-level li .menu__fourth-level {
  position: absolute;
  top: -1px;
  left: 100%;
  width: 100%;
  background: #2a1f1f;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  visibility: hidden;
  opacity: 0;
}

.menu__multi .menu__second-level li .menu__third-level li:hover .menu__fourth-level {
  visibility: visible;
  opacity: 1;
}

.init-right:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/**
 * mega menu
 */
.menu__mega .menu__second-level {
  position: absolute;
  top: 40px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 2%;
  background: #072A24;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

.menu__mega:hover .menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}

.menu__mega .menu__second-level > li {
  float: left;
  width: 32%;
  border: none;
}

.menu__mega .menu__second-level > li:nth-child(3n+2) {
  margin: 0 1%;
}


/*  drawer add */

.fixed {
    overflow: auto;
    height: 100%;
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* header slides */
.wrap{
	margin: 0 calc(50% - 50vw);
	max-width: 100vw;
	position: relative;
	overflow:hidden;
	display:block;
	min-height:100vh;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoom 10s linear 0s 1 normal both;  
}
.slide-text{
	position: absolute;
	top: 60%;
	left: 50%;
	/*font-size: 46px;
	font-family: serif;
	font-weight: bold;
	text-shadow: 2px 2px 8px #000;*/
	color: #FFFFFF;
	transform: translate(-50%,-50%);
	width:60%;
	background:rgba(220,20,60,.8);
	padding:2%;
	border-radius:10px;
}
.slide-text a{width:100%;display:inline-block;text-decoration:none;color:#FFFFFF;}
.slide-text h3{text-align:center;}
.slide-text p{	text-align:center;font-size:90%;}
.slide-text img{max-width:100%;height:auto;}
.slide-img img{
	object-fit: cover;
	height: 100vh;
  width: 100vw;
}

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

/* その場で */
.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:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

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

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

/* 右から */

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

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

  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;
}

/* button */
.Btn{
  position: relative;
  border-radius:5px;
  margin-left: auto;
 /* margin-right: auto;*/
  width: 240px;
  height: 40px;
  line-height: 40px;
  display: flex;
  text-align: center;
  background: #613332;
  font-size: 90%;
}

.Btn-Text{
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  z-index: 10;
}

.Btn-Text:before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #eba415;
  z-index: -1;
  transition: .2s;
	 border-radius:5px;
}

.Btn-Text:hover{
  color: #fff;
}

.Btn-Text:hover:before{
  width: 100%;
}
.BtnArea{display:flex;margin-top:20px;}
.BtnArea a{text-decoration:none;}


.zoom-with-text {
    max-width: 100%;/* 幅を指定 */
}

	

.zoom-with-text h4 {
	position: absolute;
	bottom: 2em;
	padding:0.5em;
	font-size:20px;
	
}

@media (max-width: 768px){
	.zoom-with-text h4 {
	font-size:15px;
	line-height:100%;
}
}


.result_box{
	position: absolute;
	bottom: 0.5em;
	margin:0.5em 1em;
	font-size:14px;
	z-index:10;
	
}

/*
.zoom-with-text p{
	position: absolute;
	bottom: 0.5em;
	margin:0.5em 1em;
	font-size:14px;
	z-index:10;
	
}
*/
@media (max-width: 999px){
	.zoom-with-text p {
	font-size:10px;
	line-height:100%;
	    padding:0 0.5em;
}
}



.zoom-with-text-image {
    overflow: hidden;
    padding: 125% 0 0; /* 縦横比を指定 */
    position: relative;
}
@media (max-width: 768px){
	.zoom-with-text-image {
    padding: 120% 0 0; /* 縦横比を指定 */
}
}

@media (min-width: 1400px){
	.zoom-with-text-image {
    padding: 90% 0 0; /* 縦横比を指定 */
}
}


.zoom-with-text-link {
    align-items: center;
    color: #333333;
	/*display: flex;*/
    height: 100%;
	padding-top:60%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-decoration: none;
    /*top: 0;*/
	bottom:0;
    width: 100%;
    z-index: 2;
	background-color: rgba(0,0,0,0);
	transition:0.3s;
}
.zoom-with-text-photo {
    display: block;
    left: 0;
    position: absolute;
    top: -3%;
    transition: all .3s ease-in-out;
    z-index: 1;
}
.zoom-with-text-link:hover {
	background-color: rgba(255,255,255,0.3);
	color:#AAAAAA;
}
.zoom-with-text-link:hover +.zoom-with-text-photo {
    transform: scale3d(1.1,1.1,1); /* hover時の倍率を指定 */
}

.f_box{width:100%;margin:2% auto 10% auto;display: flex;justify-content:space-between;flex-direction: row-reverse;}
.f_box h3{font-size:135%;font-weight:normal;text-align:left;}
.f_box h4{display:flex;justify-content:flex-end;padding-top:2%;}
.f_box h4 a{background:#c8c8c8;border-radius:5px;font-size:75%;padding:10px 30px;color:#FFFFFF;text-decoration:none;-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}
.f_box h4 a:hover{background:#53301d;}
.f_box p{font-size:15px;line-height:150%;letter-spacing:1px;padding-bottom:10px;}
.f_box p.top_num{width:-moz-fit-content;width:fit-content;font-size:175%;font-weight:normal;font-style:italic;padding-bottom:0;line-height:100%;margin-bottom:30px;border-bottom:1px solid;}
.f_box2{width:100%;margin:2% auto 10% auto;display: flex;justify-content:space-between;}
.f_box2 h3{font-size:135%;font-weight:normal;text-align:left;}
.f_box2 h4{display:flex;justify-content:flex-end;padding-top:2%;}
.f_box2 h4 a{background:#c8c8c8;border-radius:5px;font-size:75%;padding:10px 30px;color:#FFFFFF;text-decoration:none;-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}
.f_box2 h4 a:hover{background:#53301d;}
.f_box2 p{font-size:95%;line-height:150%;letter-spacing:1px;padding-bottom:10px;}
.f_box2 p.top_num{width:-moz-fit-content;width:fit-content;font-size:175%;font-weight:normal;font-style:italic;padding-bottom:0;line-height:100%;margin-bottom:30px;border-bottom:1px solid;}

.f_item{width:48%;text-align:left;padding:1% 6% 1% 6%;display: flex;flex-direction: column;justify-content:center;}
.movright{opacity : 0;
  transition: opacity .7s;}
.movright.an5-faderight {
    animation-name: faderight;
    animation-duration: 1s;
	opacity:1;
    /*animation-iteration-count: infinite;*/
}
@keyframes faderight {
from {
    transform: translateX(-10px);
}
to {
transform: translateX(0);
}
}
.f_item2{width:48%;text-align:left;padding:1%;display: flex;flex-direction: column;justify-content:flex-start;}
@media (max-width: 768px){
	.f_box,.f_box2{margin:0 auto 10% auto;flex-direction: column-reverse;}
	.f_item{width:100%;flex-direction:column;padding:2%;margin-bottom:5%;text-align:left;}
	.f_item2{width:100%;flex-direction:column;padding:2%;margin-bottom:5%;}
	/*.f_box p{font-size:75%;}
	.f_box2 p{font-size:75%;}*/
}

.fade{
  opacity : 0;
  transition: opacity .7s;
}
 
.fade.view{
  opacity: 1;
}

/* chevron_box */
.chevron_box{position: absolute;
   top: 80vh;
   right: 0;
   transform: translate(-50%,-50%);
	z-index:5;
display:flex;justify-content:center;}
@media (max-width: 768px){
	.chevron_box{/*top:60vh;*/}
}
.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}
.text {
  display: block;
  margin-top: 60px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

.swiper-pagination{opacity:0;}

/* 2023/03/20 add */

.sketch_com{margin-top:60px;}
.winners{color:#333333;border-left:3px solid #333333;padding:5px 0 0 10px;margin:0;}
.sketch_com img{width:100%;height:auto;vertical-align:bottom;padding:0;margin:0;}
.sketch_com h2{color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;display:flex;flex-direction:column;padding:0;margin-bottom:3%;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
.sketch_com h3{font-size:200%;text-align:left;margin:3% 1% 1% 1%;padding:5px 0 0 10px;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.sketch_com h4{font-size:150%;font-weight:normal;text-align:left;margin:3% 1% 1% 1%;padding:5px 0 0 10px;border-left:3px solid #333333;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.sketch_com p{line-height:135%;font-size:13px;padding-bottom:1%;margin:1%;}
.sketch_com ul{width:100%;margin:0 auto;list-style:none;padding:0;display:flex;align-items:center;}
.sketch_com li{width:48%;margin:1%;}
.sketch_com li p.bestprize{font-size:150%;}
.sketch_com ul.award_list{display:flex;align-items:flex-start;}
.gra_01{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(247, 93, 139, 1), rgba(254, 220, 64, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_02{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(253, 146, 146, 1), rgba(209, 254, 212, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_03{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(103, 126, 250, 1), rgba(142, 84, 219, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_04{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(226, 207, 255, 1), rgba(251, 253, 191, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_05{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(253, 177, 170, 1), rgba(240, 226, 226, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_06{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(29, 163, 137, 1), rgba(247, 209, 55, 1) 90%);text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_07{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(196, 182, 197, 1), rgba(35, 117, 163, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
.gra_08{font-size:200%;font-weight:normal;text-align:left;color:#FFFFFF;padding:5px 0 0 10px;background-image: linear-gradient(90deg, rgba(240, 245, 144, 1), rgba(4, 255, 11, 1));text-shadow: 0px 0px 5px rgba(49,114,1,0.7);}
@media (max-width: 768px){
	.sketch_com ul{flex-direction:column;}
	.sketch_com li{width:98%;margin:1%;}
	.winners{font-size:150%;}
	.sketch_com h2{text-align:inherit;}
	.sketch_com h3{font-size:175%;}
	.sketch_com h4{font-size:135%;}
}

/* 2023/04/05 add */
.mag_kizuna{margin-top:60px;}
.mag_kizuna img{vertical-align:bottom;padding:0;margin:0;display:inherit;}
.mag_kizuna h2{color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;display:flex;flex-direction:column;padding:0;margin-bottom:3%;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
.mag_kizuna h3{font-size:200%;font-weight:normal;text-align:left;margin-top:3%;padding:5px 0 0 10px;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.mag_kizuna h4{font-size:150%;font-weight:normal;text-align:left;margin:3% 1% 1% 1%;padding:5px 0 0 10px;border-left:3px solid #333333;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.mag_kizuna p{line-height:135%;font-size:13px;padding-bottom:1%;margin:1%;}
.mag_kizuna ul{width:100%;margin:0 auto;list-style:none;padding:0;display:flex;align-items:center;}
.mag_kizuna li{width:48%;margin:1%;}
.mag_kizuna li:first-child{border:1px solid #333333;}
.mag_kizuna li p.bestprize{font-size:150%;margin-top:20px;}
.mag_kizuna a:link{text-decoration:none;}
.mag_kizuna a:hover{text-decoration:underline;}
ul.kizuna_list{display:flex;flex-wrap:wrap;list-style:none;padding:10px 0;margin:0 auto;}
ul.kizuna_list li{width:24%;margin:3% .5%;}
@media (max-width: 768px){
	.mag_kizuna ul{flex-direction:column;}
	.mag_kizuna li{width:98%;margin:1%;}
	.mag_kizuna h2{text-align:inherit;}
	.mag_kizuna h3{font-size:175%;}
	.mag_kizuna h4{font-size:135%;}
	ul.kizuna_list li{width:31%;margin:3% 1.15%;}
	ul.kizuna_list li p{font-size:75%;}
}

.howtobreed{margin-top:60px;}
.howtobreed img{vertical-align:bottom;padding:0;margin:0;display:inherit;}
.howtobreed h2{font-size:200%;color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;display:flex;flex-direction:column;padding:0;margin-bottom:3%;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);position:static;}
.howtobreed h3{font-size:170%;color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;display:flex;flex-direction:column;padding:0;margin:3% 0;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
.howtobreed h4{font-size:150%;text-align:left;margin:3% 1% 1% 0;padding:10px 0 0 2px;border-top:1px solid #333333;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;color:#c53c3c;}
.howtobreed h5{font-size:135%;font-weight:normal;text-align:left;margin:3% 1% 1% 0;padding:5px 0 0 10px;border-left:3px solid #333333;letter-spacing:3px;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;}
.howtobreed p{line-height:135%;padding-bottom:1%;margin:1%;}
.howtobreed ol li{margin-bottom:5%;}
.howtobreed ul{width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;}
.howtobreed ul li{width:95%;margin:0.5% 0 1% 5%;}
.howtobreed li p.bestprize{font-size:150%;margin-top:20px;}
.howtobreed a:link{text-decoration:none;}
.howtobreed a:hover{text-decoration:underline;}
ul.kome{}
ul.kome li { list-style:none;}
ul.kome li:before { content:"※ ";}
img.pictfloat_r{float:right;margin:0 0 10px 10px!important;max-width:255px!important;}
.microchip{background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));padding: 3px 10px;border-radius: 5px;}
.microchip h5{margin-top:1%;}
.listing{}
.listing ul{width:100%;padding:0;margin:0;list-style:none;padding:0;}
.listing h3{text-align:left;border-left:2px solid #333333;padding-left:10px;margin-top:20px;}
.listing p{font-size:13px;line-height:135%;padding:0 10px;}
.listing a{text-decoration:none;color:#333333;}
.list_wrap{width:100%;display:flex;align-items: flex-start;margin-bottom:5%;}
.list_wrap img{max-width:255px!important;height:auto;}
.list_wrap p{flex:1;}
.post_list{}
.post_list h3{text-align:inherit;margin-bottom:0;}
.post_list p{line-height:120%;padding:5px;}
.post_list a{text-decoration:none;color:#333333;}
.post_list_date{display:flex;justify-content:flex-end;margin-bottom:10px;font-size:13px;}
.post_single{max-width:800px;margin:3% auto;border:1px solid #e564c1;border-radius:10px;overflow:hidden;}
.post_single h2{text-align:inherit;background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));padding: 3px 10px;margin-bottom:1%;}
.post_single h3{font-weight:normal;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
.post_single p{line-height:130%;margin:2%;}
.post_single ol,.post_single ul{margin:5% 0;font-size:15px;}
.post_single ol li,.post_single ul li{line-height:130%;margin-bottom:2%;}
.post_form{max-width:800px;margin:3% auto;border:1px solid #e564c1;border-radius:10px;overflow:hidden;padding:3%;}
.post_form h2{text-align:inherit;background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));padding: 3px 10px;margin-bottom:1%;}
.post_form h3{font-weight:normal;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);}
.post_form h4{font-weight:normal;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);text-align:center;}
.post_form p{line-height:130%;margin:2%;text-align:center;}
@media (max-width: 768px){
	.howtobreed ol{padding-left:7%;}
	.howtobreed ul{flex-direction:column;}
	.howtobreed li{}
	.howtobreed h2{text-align:inherit;}
	.howtobreed h3{font-size:135%;}
	.howtobreed h4{font-size:135%;}
	ul.kizuna_list li{width:31%;margin:3% 1.15%;}
	ul.kizuna_list li p{font-size:75%;}
	img.pictfloat_r{width:100%!important;max-width:100%!important;height:auto;float:none;margin:0!important;}
	.listing img{width:100%;height:auto;float:none;margin:0!important;}
	.list_wrap{flex-direction:column;}
	.list_wrap img{width:100%!important;height:auto;max-width:100%!important;}
	.list_wrap p{padding:10px 0!important;}
	.anc_max{display:block;width:100%;}
	.post_single h2{font-size:135%;}
}

.fes_list{margin:40px auto 20px auto!important;border-bottom:1px solid #333333;}

.wp-pagenavi {/* 全体 */
    margin: 20px 0;
    font-size: 12px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.wp-pagenavi a {/* フォント色 */
    color: #4a4a4a;
}
.pages {/* 左の表記 */
    margin-right: 20px;
}
.wp-pagenavi .current,
.wp-pagenavi a.page {/* ボタン */
    margin: 0 6px 6px 0;
    display: inline-block;
    border: solid 1px #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
}
.wp-pagenavi .current {/* カレント数字 */
    border: none;
    background: #87e6e9;
    color: #fff;
}
.wp-pagenavi a.page:hover {/* マウスオーバー */
    background: #87e6e9;
    color: #fff;
}
.wp-pagenavi .first,
.wp-pagenavi .extend {/* ... */
    margin-right: 10px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {/* 記号の削除 */
    display: none;
}
/* Gallery CSS */
/*-----------------------------
ギャラリー
------------------------------*/
.gallery { /** ギャラリーを囲むボックス **/
	width: 100%;
	margin-bottom: 20px !important;
	margin-top:10px !important;
    overflow: hidden;
}

.gallery br {display: none;} /** 自動で挿入される clearfix の余白解除 **/

.gallery-item { /** 画像共通のスタイル **/
    float: left;
	margin-bottom: 0 !important;
}
.gallery-icon { /** 画像を囲む dt のスタイル **/
    text-align: center;
}

.gallery-icon img {
	width: 100%;
	height: auto;
	margin-bottom: 10px !important;
}

.gallery-caption { /** キャプション **/
    color: #222;
    font-size: 12px;
    margin: 0 0 10px;
    text-align: center;
	height:65px;
}

.gallery-columns-1 .gallery-item { /** カラムなし **/
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item { /** 2カラム **/
	width: 48%;
	margin: 0 1%;
}
.gallery-columns-3 .gallery-item { /** 3カラム **/
    width: 31.33333%;
	margin: 0 1%;
}
.gallery-columns-4 .gallery-item { /** 4カラム **/
    width: 23%;
    margin: 0 1%;
}
.gallery-columns-5 .gallery-item { /** 5カラム **/
    width: 18%;
    margin: 0 1%;
}

@media screen and (max-width: 640px) {
	/* 640px以下用の記述 */
	.gallery-columns-3 .gallery-item, .gallery-columns-4 .gallery-item {
		width: 48%;
		margin: 0 1%;
	}
	.gallery-columns-5 .gallery-item {
		width: 31.33333%;
		margin: 0 1%;
	}
}

/*  FAQ  */
/*ベース*/
.accordion{margin:5% auto;}
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 1em 2.5em 1em 1em;
	display: block;
	color: #fff;
	background:#019ac6;
	border-radius:10px;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
	background-color: #ffeccb;
    border-radius: 10px;
}
.content p{padding-bottom:5%;font-size:13px;line-height:170%;}
.content span{    font-size: 150%;
    background-color: #efa253;
    border-radius: 5px;
    padding: 0 10px;
    color: #FFFFFF;}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
	color:#333333;font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	cursor: pointer;
	transition: all .5s ease;
	margin:3% 1%;
	font-size:125%;
	letter-spacing:3px;
}

summary {
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
	transition: all .3s ease;
}
 summary::after { /* 最初の状態 */
    content: "+";
    position: absolute;
    /*right: 20px;*/
    transition: all 0.3s ease;
  }
  details[open] summary::after {  /* クリックしたときに「+」⇒「×」 */
    transform: rotate(45deg);
  }

  details[open] .codeWrapper {   /* クリックしたら表示される要素 */
    overflow: auto;
    animation: ani 1s;  /* アニメーションの指定 */
	  letter-spacing:normal;
  }
  @keyframes ani {
    0% {
      opacity: 0;   /* 最初は見えない状態 */
      transform: translateY(-20px); /* 20px上にずらしておく */
    }
    100% {
      opacity: 1; /* 1秒後に見えるように */
      transform: none;  /* 20pxずらしたものを取り除く */
    }
  }

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}



.visual{
  width:100%;
  height:400px;
  position:relative;
  z-index: 1;
  background: url() no-repeat  bottom;
  background-size:cover;
  text-align: center;
	overflow:hidden;
}
#video {
   width:100%;
   height:auto;
   overflow:hidden;
   display: flex;
   position: absolute;
   z-index:1;
	top:-25%;
}
.coverTop {
  width: 100%;
  height:400px;
  position: absolute;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%);
  background-size: 2px 2px;
  z-index:2;
	display: flex;
    justify-content: center;
    align-items: center;
}
.coverTop h3{
  position: absolute;
  width:100%;
  top:15%;
  font-size:3em;
  color:#ffffff;
  text-shadow: 0px 0px 10px #3d3d3d;
}

@media (max-width: 768px){
	#video{top:-20%;}
	.visual{height:200px;top:30px;}
	.coverTop{height:200px;}
	.coverTop h3{top:10%;}

}
ul.regulations{padding:0;list-style:none;display:flex;}
ul.regulations h3{color:#333333;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);font-weight:normal;}
ul.regulations h4{color:#333333;text-shadow: 0px 0px 3px rgba(0,0,0,0.5);font-weight:normal;}
ul.regulations li{width:49%;margin:.5% auto;padding:0;border:1px solid rgba(227, 129, 200,1);border-radius:10px;text-align:center;overflow:hidden;}
ul.regulations li a{text-decoration:none;display: block;background-image: linear-gradient(145deg, rgba(255, 164, 187,1), rgba(227, 129, 200,1));padding: 10px 0;color:#FFFFFF;}
@media (max-width: 768px){
	ul.regulations{flex-direction:column;}
	ul.regulations li{width:90%;margin-bottom:3%;}
}
.wpcf7 {width:60%;margin:30px auto;}
.wpcf7 p{text-align:inherit;}
/* コンタクトフォーム横幅調節 */
.wpcf7 input[name="your-name"] { /* 名前入力欄 */
 width: 100%;
}
.wpcf7 input[name="your-email"] { /* メール入力欄 */
 width: 100%;
}
.wpcf7 input[name="your-subject"] { /* タイトル入力欄 */
 width: 100%;
}
.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
 width: 100%;
}
@media (max-width: 768px){
	.wpcf7 {width:90%;margin:0 auto;}
}

.talkshow {max-width:80%;margin:0 auto;}