@charset "UTF-8";

/* --------------------------------------
   　reset
-------------------------------------- */
 h1,dd,ul {
   margin: 0;
   padding: 0;
}
a {
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}

/* --------------------------------------
   　common
-------------------------------------- */
html{
  height: -webkit-fill-available;
}
body, .globalMenuSp {
   font-size: 14px;
   font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
   line-height: 1.8;
   margin: 0;
   padding: 0;
   position: relative;
   min-height: 100vh;
   height: -webkit-fill-available;

	/* 夏用 */
	background-color: #73D2E6;

   background-color: -moz-linear-gradient( #73D2E6 0%, #81C1E7 100%);
   background-color: -webkit-gradient(linear, left top, left bottom, from(#73D2E6), to(#81C1E7));
   background-color: -webkit-linear-gradient( #73D2E6 0%, #81C1E7 100%);
   background-color: -o-linear-gradient( #73D2E6 0%, #81C1E7 100%);
   background-color: linear-gradient( #73D2E6 0%, #81C1E7 100%);
   position: relative;
}
body.autumn,
body.autumn .globalMenuSp {
	background-color: #e9953f;
}

.container ,
.container a {
   color: #010101;
   text-decoration: none;
}
h1 {
   font-size: 3.143em;
}
.page h1 {
   font-size: 2.6em;
}
@media screen and (min-width:540px) {
	.page h1 {
	   font-size: 4em;
	}
	.page_ttl .page_ttl_jp {
		font-size: 1em;
	}
}
@media screen and (min-width:768px) {
	.page h1 {
	   font-size: 5.5em;
	}
	.page_ttl .page_ttl_jp {
		font-size: 1em !important;
	}
}


.image {
   width: 100%;
}
.pc {
   display: none;
}
.sp {
   display: block;
}
.wrap,
.header .header_inner,
h1.logo {
   position: relative;
}
.no_link {
   color: #888;
   text-align: left;
}
.display_none {
   display: none;
}
.red {
   color: #D44527;
}
.blue {
   color: #092378;
}


/* --------------------------------------
   　summer
-------------------------------------- */
body::before {
   content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   margin:0;
   z-index:-1;
   width:260%;
   height:100vh;
   background-image: url(../img/common/bg_wave.svg);
   background-size:cover;
   background-position:center center;
   animation: bgiLoop 6s linear infinite;
}
.globalMenuSp {
   background-image: url(../img/common/bg_wave.svg);
   background-repeat: repeat;
   background-size: 260%;
   width: 100%;
   height: 100%;
}

/* --------------------------------------
   　autumn
-------------------------------------- */
/* 秋用住宅 */
body.autumn::before {
   content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   margin:0;
   z-index:-1;
   height:100vh;
   background-image: url(../img/common/autumn_bg.png);
   background-size:100%;
   background-position:center bottom;
   background-repeat: no-repeat;
   animation: none;
}
body.autumn .globalMenuSp {
	background-image: none;
}
/*
body.autumn .wrap {
   position: relative;
}
*/
@keyframes bgiLoop {
   0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.95, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

body.autumn .leaves-container {
  position: absolute;
  height: 100vh; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
  z-index: -1;
}

/* 落ち葉の共通スタイル */
body.autumn .leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 8s linear;
}
body.autumn .leaf-1 {
  background-image: url('../img/common/leaf-1.svg');
}
body.autumn .leaf-2 {
  background-image: url('../img/common/leaf-2.svg');
}
body.autumn .leaf-3 {
  background-image: url('../img/common/leaf-3.svg');
}
body.autumn .postion_ab {
	position: absolute;
}

/* 落ち葉が降るアニメーション */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: rotate(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(1080deg);
  }
}

/* --------------------------------------
   　winter
-------------------------------------- */
body.winter,
body.winter .globalMenuSp,
.winter .loader {
	background-color: #2A75B6;
}
body.winter::before {
   content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   margin:0;
   z-index:-1;
   height:100vh;
   background-image: url(../img/common/winter_bg.png);
   background-size:100%;
   background-position:center bottom;
   background-repeat: no-repeat;
   animation: none;
}
.winter .globalMenuSp,
.winter .loader {
	background-image: url(../img/common/winter_bg.png);
	background-repeat: no-repeat;
	background-size: 200%;
	width: 100%;
	height: 100%;
	background-position: bottom;
}

@media screen and (min-width: 1200px) {
	.winter .loader {
		background-size: 100%;
	}
}

.winter .snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.winter .snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}

/* --------------------------------------
   　spring
-------------------------------------- */
/*
body.spring,
body.spring .globalMenuSp,
.winter .loader {
	background-color: #2A75B6;
}
*/
body.spring::before {
   content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   margin:0;
   z-index:-1;
   height:100vh;
   background-image: url(../img/common/spring_bg.png);
   background-repeat: no-repeat;
	background-size: 200%;
	width: 100%;
	height: 100%;
	background-position: bottom;
   animation: none;
}
body.spring::before,
.spring .globalMenuSp,
.spring .loader {
	background-image: url(../img/common/spring_bg.png);
	background-repeat: no-repeat;
	background-size: 200%;
	width: 100%;
	height: 100%;
	background-position: bottom;
}

.spring .sakura {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.spring .sakura li {
	width: 18px;
	position: absolute;
	list-style: none;
	top: -50px;
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
.spring .sakura li img {
	width: 10px;
}
@keyframes fall {
	to {
		top: 120%;
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}
	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}
@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg);
	}
	to {
		transform: translateX(0px) rotate(0deg);
	}
}
.spring .sakura li:nth-child(1) {
	left: 0;
	animation: fall 10s linear infinite, rotate1 3s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(2) {
	left: 5vw;
	animation: fall 15s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(3) {
	left: 15vw;
	animation: fall 9s linear infinite, rotate1 3.5s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(4) {
	left: 30vw;
	animation: fall 8s linear infinite, rotate2 4s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(5) {
	left: 40vw;
	animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(6) {
	left: 55vw;
	animation: fall 11s linear infinite, rotate2 3s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(7) {
	left: 65vw;
	animation: fall 7s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
.spring .sakura li:nth-child(8) {
	left: 50vw;
	animation: fall 7s linear infinite, rotate1 3s ease-in-out infinite alternate;
}

@keyframes fall {
	to {
		top: 120%;
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}
	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}
@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg);
	}
	to {
		transform: translateX(0px) rotate(0deg);
	}
}

@media screen and (min-width: 1200px) {
	.spring .loader {
		background-size: 100%;
	}
	body.spring::before {
		background-size: 100%;
	}
}


/* --------------------------------------
   　contents
-------------------------------------- */
.container {
   padding-top: 50px;
}
.primary {
   background: #fff;
	background-image: url(../img/common/line.png), url(../img/common/line_vertical.png), url(../img/common/line.png), url(../img/common/line_vertical.png);
	background-position: top, right, bottom, left;
	background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
	background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
/*
   border: 4px solid #000;
   border-image-source: url(../img/common/line.svg);
   border-image-slice: 36.4%;
   border-image-width: 20px;
   border-image-outset: 0;
   border-image-repeat: repeat;
*/
   margin: 1em 0.5em;
   padding-top: 1em;
   word-break: break-all;
}
.feature {
   padding: 0 1em 1em;
}
/*
.bottom_line {
   border-style:solid;
   -moz-border-image: url(../img/common/line.svg) 8 stretch;
   -webkit-border-image: url(../img/common/line.svg) 8 stretch;
   -ms-border-image: url(../img/common/line.svg) 8 stretch;
   border-image: url(../img/common/line.svg) 4 stretch;
   border-width: 0 0 3px;
   position: relative;
}
*/
.bottom_line {
	background-image: url(../img/common/line.png);
	background-position: bottom left;
	background-size: 100% 3px;
	background-repeat: repeat-x;
/*
   border-image: url(../img/common/line.svg) 4 stretch;
   border-width: 0 0 3.5px;
*/
   padding: 0 0.5em 1em;
   margin-top: 0;
   position: relative;
}
.flex {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}
.btns {
   background: #092378;
   text-align: center;
   border-radius: 50px;
   position: relative;
   width: 100%;
   margin: 1em auto;
   font-size: 12px;
   letter-spacing: 0.1em;
   transition : all 0.4s ease 0s;
   font-weight: bold;
}
.btns:hover {
   background-color: #FEEE4A;
   transition : all 0.4s ease 0s;
}
.btns a:hover {
   color: #092378 !important;
   font-weight: bold;
}
.btns .btn {
   color: #fff;
   padding: 1em;
   display: block;
}
.back_idx {
   margin: 3em auto;
   width: 32%;
}
.wrap {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
}


.youtube iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16/9;
}

/* --------------------------------------
   hover
-------------------------------------- */
#special a {
   color: #fff;
   font-weight: bold;
}
#special a img,
#special a img:hover,
#special a,
#special a:hover {
   transition : all 0.6s ease 0s;
}
#special a img:hover {
   opacity: 0.6;
}

/* --------------------------------------
   　font
-------------------------------------- */
h1, #news .day,
#staff .comment,
h2.ttl,
#onair .site_ttl {
   font-family: 'Darumadrop One',"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
.btns,
nav.globalMenuSp,
footer .sns_area {
   font-family: 'Paytone One', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
header .header_inner nav ul .btn-youtube,
header .header_inner nav ul .btn-twitter,
#news .news_ttl {
   font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

/* --------------------------------------
   　header
-------------------------------------- */
header .header_inner nav ul .btn-youtube,
header .header_inner nav ul .btn-twitter {
   font-weight: bold;
   font-size: 14px;
   display: block;
   padding: 7px 0 7px 42px;
   color: #fff;
   width: 120px;
   background-image: url(../img/common/line.png), url(../img/common/line_vertical.png), url(../img/common/line.png), url(../img/common/line_vertical.png);
	background-position: top, right, bottom, left;
	background-size: 30% 3px, 3px 30%, 30% 3px, 3px 30%;
	background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
/*
   border: 4px solid #000;
   border-image-source: url(../img/common/line.svg);
   border-image-slice: 31.2%;
   border-image-width: 60px;
   border-image-outset: 0;
   border-image-repeat: repeat;
*/
   margin-bottom: 10px;
   letter-spacing: 0.07em;
}
header .header_inner nav ul .btn-youtube::before,
header .header_inner nav ul .btn-twitter::before {
   content: "";
   display: block;
   position: absolute;
   top: 12px;
   left: 15px;
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
   background-size: 100%;
}
header .header_inner nav ul .btn-youtube {
   background-color: #D44527;
}
header .header_inner nav ul .btn-youtube::before {
   background-image: url(../img/common/icon-youtube.svg);
}
header .header_inner nav ul .btn-twitter {
   background-color: #30ABEB;
}
header .header_inner nav ul .btn-twitter::before {
   background-image: url(../img/common/icon-twitter.svg);
}
header .header_inner nav ul .nav-sns {
   margin-top: 45px;
}
.header,
.sp_drawer_logo_wrap {
   height: 50px;
   background: #FEEE4A;
   width: 100%;
   display: block;
   position: fixed;
   z-index: 100;
}
h1.logo .image.sp,
.sp_drawer_logo {
   width: 165px;
   max-width: 200px;
   margin: 0 auto;
   padding-top: 8px;
}
h1.logo {
   width: 88%;
   margin: 0 auto 1em;
}
.header_news_txt span {
	display: none;
}
.header_news_txt {
	width: 60%;
	margin: 1em auto;
}

/* --------------------------------------
   　gnav
-------------------------------------- */
.nav{
  display: none;
}
.sp_menu{
  display: flex;
  justify-content: center;
}
.hamburger {
   display : block;
   position: fixed;
   z-index : 2;
   right : 5px;
   top   : 3px;
   width : 42px;
   height: 42px;
   cursor: pointer;
   text-align: center;
}
.hamburger span {
   display : block;
   position: absolute;
   width   : 30px;
   height  : 3px ;
   left    : 6px;
   background : #092378;
   font-weight: bold;
   -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;
}
.hamburger span:nth-child(2) {
   top: 20px;
}
.hamburger span:nth-child(3) {
   top: 30px;
}
.hamburger.active span:nth-child(1) {
   top : 16px;
   left: 6px;
   background :#092378;
   -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 :#092378;
   -webkit-transform: rotate(45deg);
   -moz-transform   : rotate(45deg);
   transform        : rotate(45deg);
}
nav.globalMenuSp {
   position: fixed;
   z-index : 1;
   top  : 0;
   left : 0;
   color: #092378;
   text-align: center;
   width: 100%;
   height: 100vh;
   opacity: 0;
   transition: opacity .6s ease, visibility .6s ease;
   display: none;
}
nav.globalMenuSp ul {
   margin: 0 auto;
   padding: 1.929em 1em;
   margin-top: 0;
   display: none;
}
nav.globalMenuSp ul li {
   list-style-type: none;
   padding: 0;
   width: 100%;
   transition: .4s all;
   font-size: 1.571em;
   position: relative;
   transition : all 0.6s ease 0s;
}
nav.globalMenuSp ul li:last-child {
   padding-bottom: 0;
}
nav.globalMenuSp ul li a {
   /* display: block; */
   color: #092378;
   padding: 0;
   text-decoration: none;
   line-height: 1.8;
   text-align: left;
}
nav.globalMenuSp.active {
   opacity: 100;
   display: block;
}
nav.globalMenuSp.active ul {
   display: block;
   max-width: 400px;
}

nav.globalMenuSp ul li a:hover {
   color: #FEEE4A;
   transition : all 0.3s ease 0s;
}
nav.globalMenuSp ul li.nav-icon,
nav.globalMenuSp ul li.nav-icon2 {
   padding-left: 1.3em;
   text-align: left;
   letter-spacing: 0.06em;
}
header .header_inner nav ul li.nav-icon::before {
   content: "";
   display: block;
   position: absolute;
   top: 13px;
   left: 0;
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
   background-size: 100%;
}
header .header_inner nav ul li.nav-icon:nth-child(1)::before,
header .header_inner nav ul li.nav-icon:nth-child(5)::before {
   background-image: url(../img/common/icon_menu01.svg);
}
header .header_inner nav ul li.nav-icon:nth-child(2)::before,
header .header_inner nav ul li.nav-icon:nth-child(6)::before {
   background-image: url(../img/common/icon_menu02.svg);
}
header .header_inner nav ul li.nav-icon:nth-child(3)::before,
header .header_inner nav ul li.nav-icon:nth-child(7)::before {
   background-image: url(../img/common/icon_menu03.svg);
}
header .header_inner nav ul li.nav-icon:nth-child(4)::before,
header .header_inner nav ul li.nav-icon:nth-child(8)::before {
   background-image: url(../img/common/icon_menu04.svg);
}

/* パインの日 */
header .header_inner nav ul li.nav-icon2:nth-child(1)::before,
header .header_inner nav ul li.nav-icon2:nth-child(3)::before,
header .header_inner nav ul li.nav-icon2:nth-child(5)::before,
header .header_inner nav ul li.nav-icon2:nth-child(7)::before {
   background-image: url(../img/common/icon_pain01.svg);
   top: 4px;
}
header .header_inner nav ul li.nav-icon2:nth-child(2)::before,
header .header_inner nav ul li.nav-icon2:nth-child(4)::before,
header .header_inner nav ul li.nav-icon2:nth-child(6)::before,
header .header_inner nav ul li.nav-icon2:nth-child(8)::before {
   background-image: url(../img/common/icon_pain02.svg);
}
header .header_inner nav ul li.nav-icon2::before {
   content: "";
   display: block;
   position: absolute;
   top: 13px;
   left: 0;
   width: 20px;
   height: 32px;
   background-repeat: no-repeat;
   background-size: 100%;
}

.sp.header_catch {
   text-align: center;
   padding-bottom: 20px;
}
.sp.header_catch img {
   width: 80%;
}


.bnr-movie {
   margin-bottom: 0;
   padding-top: 70px;
}
.bnr-movie img,
.bnr-movie a {
   display: block;
   height: auto;
}
.bnr-movie a {
   width: 70%;
   margin: 0 auto;
}
.bnr-movie img {
   width: 100%;
}

@media screen and (min-width: 768px) {
   .bnr-movie {
      margin-bottom: 0;
      padding-top: 100px;
   }
   .bnr-movie a {
      width: 50%;
   }
}
@media screen and (min-width: 1028px) {
.bnr-movie {
   padding-top: 0;
}
   .bnr-movie a {
      width: 83%;
   }
}


/* --------------------------------------
   　news
-------------------------------------- */
#news .day {
   color: #76D2E6;
   position: relative;
   padding: 0 10px 0 24px;
   margin-bottom: 0;
}
#news .day::before {
   content: "";
   display: block;
   position: absolute;
   top: 6px;
   left: 0px;
   width: 18px;
   height: 18px;
   background-repeat: no-repeat;
   background-size: 100%;
   background-image: url(../img/common/news_icon.png);
}
#news .news-list dd {
   border-bottom: 1px dashed #ccc;
   margin-bottom: 14px;
   padding-bottom: 14px;
   line-height: 1.4;
}
a.link {
	color: #092378;
	text-decoration: underline;
}
a.link:hover {
	text-decoration: none;
}

/* --------------------------------------
   　footer
-------------------------------------- */
footer {
   position: relative;
}
footer .sns_area {
   background-repeat: no-repeat;
   background-size: 90%;
   background-image: url(../img/common/sp_footer_icon.png);
   background-position: center;
/*    height: calc((100vw * 196) / 688); */
	position: relative;
}
footer .sns_area ul.flex {
   justify-content: center;
}
footer .sns_area ul li {
   list-style: none;
   width: 32px;
   margin: 2%;
}
footer .sns_area,
footer .copyright{
   color: #fff;
   text-align: center;
}
footer .totop {
   width: 52px;
   margin: 4em auto 2em;
}
footer .copyright {
   padding: 1em;
   margin-top: 0;
}
footer .sns_area a img:hover{
   transform: translate(0,-5px);
}
footer .sns_area .f_sns_ttl {
	display: inline-block;
	width: 100% !important;
}
footer .purun a img:hover {
  animation: purun 0.8s linear 0s 1;
/* 	animation: purun 0.8s infinite; */
}
@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/* --------------------------------------
   　opening
-------------------------------------- */
.wrapper{
	width:200px;
	height:60px;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}
.circle{
	width:20px;
	height:20px;
	position: absolute;
	left:19%;
	transform-origin: 50%;
	animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
	left:45%;
	animation-delay: .2s;
}
.circle:nth-child(3){
	left:auto;
	right:19%;
	animation-delay: .3s;
}
.shadow:nth-child(4){
	left: 45%;
	animation-delay: .2s
}
.shadow:nth-child(5){
	left:auto;
	right:20%;
	animation-delay: .3s;
}
.shadow,
.fiv-anniversary-box .shadow2,
.fiv-anniversary-box .shadow3,
.fiv-anniversary-box .shadow4,
.fiv-anniversary-box .shadow5 {
	width:15px;
	height:4px;
	border-radius: 50%;
	background-color: rgba(0,0,0,.5);
	position: absolute;
	top:70px;
	transform-origin: 50%;
	z-index: -1;
	left:20%;
	filter: blur(1px);
	animation: shadow .5s alternate infinite ease;
}

/* 5万人記念 */
.fiv-anniversary-box .circle {
	left: 0;
}
.fiv-anniversary-box .circle:nth-child(2) {
	left:23%;
	animation-delay: .2s;
}
.fiv-anniversary-box .circle:nth-child(3) {
	left:45%;
	animation-delay: .3s;
}
.fiv-anniversary-box .circle:nth-child(4) {
	left:66%;
	animation-delay: .4s;
}
.fiv-anniversary-box .circle:nth-child(5) {
	left:87%;
	animation-delay: .5s;
}
.fiv-anniversary-box .shadow {
	left:1%;
}
.fiv-anniversary-box .shadow2 {
	left:24%;
	animation-delay: .2s;
}
.fiv-anniversary-box .shadow3 {
	left:46%;
	animation-delay: .3s;
}
.fiv-anniversary-box .shadow4 {
	left:67%;
	animation-delay: .2s
}
.fiv-anniversary-box .shadow5 {
	left:88%;
	animation-delay: .3s;
}


@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}

.wrapper span{
	position: absolute;
	top:90px;
	font-family: 'Lato';
	font-size: 14px;
	letter-spacing: 12px;
	color: #fff;
	left:20%;
}

/* 夏用 */
.loader {
	background-image: url(../img/common/bg_wave.svg);
	background-size: 260%;
	background-position: center center;
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: #73D2E6;
	z-index: 555;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 秋用 */
body.autumn .loader {
	background-image: url(../img/common/autumn_bg.png);
	background-position: center bottom;
	height: 100vh;
	background-color: #e9953f;
	background-repeat: no-repeat;
}
body.autumn .loader .txt {
  font-weight: bold;
　color: rgb(30, 50, 93);
}


/* --------------------------------------
   　totopの泡アニメーション
-------------------------------------- */
.button_animation {
   transition: all 0.3s ease;
   cursor: pointer;
   text-decoration: none;
}

/* ハートの共通スタイル */
.button_animation::before,
.button_animation::after {
   content: "";
   background-size: contain;
   background-repeat: no-repeat;
   width: 20px;
   height: 20px;
   position: absolute;
   opacity: 0;
}

/* 左上のハートのスタイル */
.button_animation::before {
   background-image: url('../img/common/awa2.svg');
   top: 20px;
   left: 34vw;
}

/* 右下のハートのスタイル */
.button_animation::after {
   background-image: url('../img/common/awa.svg');
   top: 70px;
   right: 32vw;
}

/* ホバー時のスタイル */
.button_animation::before {
   animation: awa 1.5s infinite ease-out;
}

/* ボタンホバー時の右下のハートのスタイル */
.button_animation::after {
   animation: awa 1.5s 0.2s infinite ease-out;
}

/* アニメーションの設定 */
@keyframes awa {
   0% {
   transform: translateY(0) scale(1);
   opacity: 0;
   }
   25% {
   opacity: 1;
   }
   75% {
   opacity: 1;
   }
   100% {
   transform: translateY(-20px) scale(1.4);
   opacity: 0;
   }
}

/* SPのスタイル */
@media screen and (max-width: 768px) {

   /* 左上のハートのスタイル */
   .button_animation::before {
   animation: awa 1.5s infinite ease-out;
   }

   /* 右下のハートのスタイル */
   .button_animation::after {
   animation: awa 1.5s 0.2s infinite ease-out;
   }
}

/* --------------------------------------
   modaaal
-------------------------------------- */
.modaal-video-wrap {
	margin: auto 0 !important;
}

/* --------------------------------------
   page
-------------------------------------- */
.page_ttl {
   background-image: url(../img/common/ttl_bg.png);
   background-repeat: no-repeat;
   background-size: 100%;
   color: #fff;
   text-align: center;
   height: calc((100vw * 593) / 1916);
   position: relative;
   line-height: 1.3;
   margin: 2em 0.5em;
}
.page_ttl .page_ttl_jp {
   font-size: 12px;
   font-weight: bold;
   margin: 0;
}
.wrap_page_ttl {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

/* --------------------------------------
   newsとspecial
-------------------------------------- */
.list_item.primary {
   padding: 0;
}
.news_ttl {
   font-size: 1.2em;
}
.detail .news_ttl {
   font-size: 1.2em;
   line-height: 1.4;
   padding: 0 1em 1em;
}
.post {
   padding: 0 1em 2em;
}
h2.bottom_line.article_ttl:before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../img/common/icon_h2.png);
	background-size: 100%;
	background-repeat: no-repeat;
	vertical-align: middle;
   position: absolute;
   top:-10px
}
h2.bottom_line.article_ttl {
	font-size: 1.2em;
	margin-top: 2em;
	padding: 0 0 0.5em 0 !important;
   position: relative;
}
h2.bottom_line.article_ttl span {
	padding-left: 50px;
   padding-bottom: 10px;
   display: block;
   line-height: 1.5em;
}
.post_image {
	width: 50%;
	margin: auto;
}

/* 枠がないときのスタイル */
.page_wrap {
   margin: 1em;
}

/* --------------------------------------
   　PC style
-------------------------------------- */
@media screen and (min-width: 1200px) {

   /* common */
   body {
      border-top: 8px solid #FEEE4A;
      font-size: 16px;
   }
   body::before {
      width:100%;
   }
   .sp {
      display: none;
   }
   .pc {
      display: block;
   }
   .pc_layout {
      display: flex;
      justify-content: space-between;
      max-width: 1280px;
      margin: auto;
   }
   .pc_layout .container {
      padding-top: 0;
       width: 960px;
   }
   .pc_layout .page h1 {
      font-size: 4.5em;
   }
   .back_idx.btns {
	   font-size: 0.7em;
      width: 20%;
      margin: 4em auto 0 !important;
   }
   .btns .btn {
      padding: 1em;
   }
   .btns {
      font-size: 14px;
   }
   .header_news_txt {
		width: 72%;
		margin: 2em auto 1em;
	}

   .pc.header_catch {
      padding-left: 20px;
      padding-bottom: 20px;
   }

   .pc.header_catch img {
      width: 100%;
   }


/*
	.primary {
		background-size: 100% 4px, 4px 100%, 100% 4px, 4px 100%;
	}
*/

   /* wave */
   .wave,
   .loader {
      background-size: 100%;
      /* height: calc((100vw * 1280) / 837); */
   }

   /* gnav */
   .pc_layout .header,
   .pc_layout .sp_drawer_logo_wrap,
   .pc_layout nav.globalMenuSp,
   .pc_layout nav.globalMenuSp ul {
      background: none;
      display: block;
   }
   .pc_layout .header, .pc_layout .sp_drawer_logo_wrap {
      height: 100%;
      background: none;
      width: 280px;
      position: relative;
      z-index: 100;
      margin-top: 3em;
   }
   .pc_layout nav.globalMenuSp {
      background-image: none;
      position: relative;
      height: 100%;
      opacity: 1;
   }
   .pc_layout nav.globalMenuSp ul {
		margin-top: 0;
      padding-top: 0;
   }
   .pc_layout .sp_drawer_logo_wrap {
      display: none;
   }
   .pc_layout .hamburger {
      display: none;
   }
   nav.globalMenuSp ul li {
   transition: unset;
   transition : unset;
}

   /* contents */
   .feature {
      padding: 0 1.5em 0;
   }

   /* footer */
   footer .sns_area {
      background-size: 90%;
      background-image: url(../img/common/pc_footer_icon.png);
      padding: 0;
      height: 350px;
/*       max-height: 350px; */
      margin-top: 2em;
   }
   footer .sns_area ul.flex {
      justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
   }
   footer .sns_area ul.flex li {
      width: 40px;
      margin: 0.5em;
   }
   footer .totop {
      position: fixed;
      right: 0;
      bottom: 0;
      padding: 1em;
      cursor: pointer;
      transition: .3s;
      margin: 0;
      width: 64px;
      z-index: 1;

      /*デフォルトで非表示にする*/
      opacity: 0;
      visibility: hidden;
   }
   /*このクラスが付与されると表示する*/
   footer .active {
      opacity: 1;
      visibility: visible;
   }
   /* page */
   .pc_layout .page_ttl .page_ttl_jp {
      font-size: 1em;
   }

   /* 枠がないときのスタイル */
   .pc_layout .page_wrap {
      width: 86%;
      margin: 4em auto;
   }
   .pc_layout .page_ttl {
      width: 716px !important;
      margin: 3em auto 0;
      height: 222px;
   }
   h2.bottom_line {
      padding: 0 1.5em 0.5em;
   }

   /* newsとspecial */
   #news .post {
      padding: 1.5em 2em 4em;
   }
   .detail .news_ttl {
      font-size: 1.5em;
      line-height: 1.4;
      padding: 0 2em 1em;
   }
   h2.bottom_line.article_ttl:before {
		width: 50px;
		height: 50px;
	}
	h2.bottom_line.article_ttl {
		font-size: 1.3em;
		margin-top: 3em;
	}


   h2.bottom_line.article_ttl span {
      padding-left: 60px;
      padding-bottom: 5px;
      line-height: 1.6em;
   }
	#news .day::before {
		top: 9px;
	}

   /* width */
   #intro.page,
   #news.page,
   #special.page {
      width: 84%;
      margin: 4em auto 0;
   }

   /* totopの泡アニメーション */
   .button_animation::before {
      top: 40px;
      left: -6px;
   }
   .button_animation::after {
      top: 90px;
      right: -14px;
   }


}