<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* HEADER*/
body {
  margin: 0;
  color: #231f20;
  background: #fcf9f0;
		font-family: "游明朝", "Yu Mincho","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing: 0.09em;
}
.box{
	opacity:0;
}
.slideUp{
	opacity:1;
	animation:slideUp 1s ease-in-out forwards;
}
@keyframes slideUp{
  from {
    opacity: 0;
			    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
			    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.en {
	letter-spacing: 0 !important;
	line-height: 1.5 !important;
}
.jp {
			font-family: "游明朝", "Yu Mincho","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif !important;
}
img {
  max-width: 100%;
}
p {
  word-wrap: break-word;
}
#fade {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #f6f4ef;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999 !important; /* #loaderより少ない値を入れて下さい */
}
#progress{
max-width:150px;
}
#progressBarWrap {
  width: 150px;
  height: 2px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  background: #EEE;
}
#progressBar {
  width: 0;
  height: 2px;
  position: fixed;
  background: #BED66D;
  z-index: 99999;
}
#loader {
  width: 23px;
  height: 23px;
  position: fixed;
  _position: absolute; /* IE6対策 */
  top: 50%;
  left: 50%;
  margin-top: -10px; /* heightの半分のマイナス値 */
  margin-left: -10px; /* widthの半分のマイナス値 */
  z-index: 99999; /* #fadeより多い値を入れて下さい */
}
#progressTxt {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  z-index: 99999999; /* #fadeより多い値を入れて下さい */
  font-family: 'Oswald', sans-serif !important;
  font-size: 100px;
  color: #FFF;
  letter-spacing: 3px;
}
.langbuttons {
  padding: 12px 0 0 20px;
}
.langbuttons a {
  margin-left: 7px;
  padding: 5px 5px !important;
  margin: 0 5px 0 0 !important;
  cursor: pointer;
  text-decoration: none;
    font-weight:bold;
  transition: all 0.2s ease-in-out;
  font-size: 13px !important;
	  font-family: "Cormorant Garamond", serif !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  float: left;
}
/* when the button is pushed */
.langbuttons a.on {
  color: #FFF !important;
  background: #231f20;
}
.sns {
  padding: 12px 0 0 20px;
}
.sns a {
  margin-left: 7px;
  padding: 5px 5px !important;
  margin: 0 10px 0 0 !important;
  cursor: pointer;
  text-decoration: none;
    font-weight:bold;
-webkit-text-stroke: .5px #231f20;
  transition: all 0.2s ease-in-out;
  font-size: 13px !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  float: left;
  background: #231f20;
}
.sns a img {
  max-width: 80%;
  padding: 2px 0 0 0;
}
@media only screen and (max-width:769px) {
	#progressBarWrap {
  width: 100px;
	}
	#progress{
max-width:100px;
}
  .sns, .langbuttons {
    float: left;
	  padding: 0 0 0 20px;
  }
}

.slider2 li:not(:first-child) {
  opacity: 0;
}
.slider2.slick-initialized li:not(:first-child) {
  opacity: 1;
}
/*=====================================================================================================*/
.langbuttons{
	position: fixed;
	top:20px;
	right:20px;
	z-index: 999;
}
@media only screen and (max-width:736px) {
	.langbuttons{
	top:15px;
	right:auto;
		left:50%;
		transform: translateX(-50%);
}
}
body p{
	font-size: 18px;
	  font-weight:bold;
}
@media only screen and (max-width:736px) {
	body p{
	font-size: 15px;
	  font-weight:bold;
}
	
}
header {
  position: relative;
	height:100vh;
	width: 100%;
	animation:hd 3s ease-in-out forwards;

}
@keyframes hd{
	0%{
			height:100vh;
	}
	99%{
			height:100vh;
	}
	100%{
			height:auto;
	}
}
header .logo {
  box-sizing: border-box;
  position: absolute;
	top:50%;
	left:50%;
	text-align: center;
	transform: translate(-50%,-50%);
  z-index: 998;
	animation:gogo 3s ease-in-out forwards;
}
@keyframes gogo{
	0%{
	top:50%;
		opacity: 0;
			transform: translate(-50%,-50%);
	}
		25%{
	top:50%;
				opacity: 1;
				transform: translate(-50%,-50%);
	}
			60%{
	top:50%;
				opacity: 1;
				transform: translate(-50%,-50%);
	}
		100%{
		top:70px;
			transform: translate(-50%,0);
	}
}
header .logo img{
	width:400px;
animation:gogo2 1s ease-in-out forwards;
}
@keyframes gogo2{
	0%{
	width:600px;
	}
		100%{
	width:300px;
	}
}
@media only screen and (max-width:736px) {
	header .logo img{
	width:80%;
animation:gogo2-sp 1s ease-in-out forwards;
}
}
@keyframes gogo2-sp{
	0%{
	width:80%;
	}
		100%{
		width:70%;
	}
}
a {
  transition: all 0.3s ease-in-out;
}
#mv{
	background: url("../img/mv.jpg") no-repeat;
	background-size:cover;
	width:100%;
	height:100vh;
	animation:mv 1s ease-in-out 3s forwards;
	opacity: 0;
	position: absolute;
	top:0;
	left:0;
}
@media only screen and (max-width:736px) {
	#mv{
	background: url("../img/mv.jpg") no-repeat center bottom;
	background-size:150%;
	}
}
@keyframes mv{
	0%{
opacity: 0;
	}
		100%{
	opacity: 1;
	}
}
#mv h2 span{
	position: absolute;
top: 21%;
    right: 10%;
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
	white-space: pre-line;
	text-align: right;
	font-size: 24px;
	line-height: 1.8;
}
@media only screen and (max-width:736px) {
	#mv h2 span{
		font-size: 18px;
		text-align: center;
		right:auto;
		left:50%;
		transform: translateX(-50%);
		width:90%;
		font-weight: normal;
	}
}
#mv .maru .pic{
	background: url("../img/maru.png") no-repeat;
	background-size:100%;
		position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
    box-sizing: border-box;
}
#mv .maru .pic span{
position: relative;
  cursor: pointer;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic span{
	
	}
	
}
#mv .maru .pic span .balloon_top { 
  width: 250px; /* 横幅 */
  position: absolute;
  left: 50%;
  bottom: 80%; /* Y軸の位置 */
  transform: translateX(-50%);
  margin-bottom: 15px; /* テキストとの距離 */
  padding: 20px;
  border-radius: 10px; /* 角の丸み */
  background: #FFF; /* ツールチップの背景色 */
  font-size: 14px;
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.25);
}
 @media only screen and (max-width:736px) {
		#mv .maru .pic span .balloon_top { 
			width:150px;
		}
}
#mv .maru .pic span .balloon_top::before { /* 吹き出しの「しっぽ」のスタイル */
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 12px solid #FFF; /* 最後の値は「ツールチップの背景色」と合わせる */
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
}
 
#mv .maru .pic span:hover .balloon_top { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}
#mv .maru .pic.pic7 span .balloon_top { /* ツールチップのスタイル */
bottom:auto; /* Y軸の位置 */
  top: 80%; /* Y軸の位置 */
  transform: translateX(-50%);
  margin-bottom: 0; /* テキストとの距離 */
	margin-top: 15px;
}
 
#mv .maru .pic.pic7 span .balloon_top::before { /* 吹き出しの「しっぽ」のスタイル */
  border: 10px solid transparent;
	  border-top: none;
  border-bottom: 12px solid #FFF; /* 最後の値は「ツールチップの背景色」と合わせる */
  top:auto;
  bottom: 99%;
}
 
#mv .maru .pic.pic7 span:hover .balloon_top { /* マウスオーバー時のスタイル */
 bottom:auto;
	top:100%;
}
@keyframes fuwa{
			0%{
margin: 0;
	}
	50%{
margin: 10px 0 0 0;
	}
		100%{
margin: 0;
	}
	}
#mv .maru .pic img{
	border-radius:50%;
	line-height: 0;
}
#mv .maru .pic1{
    top:56%;
    left: 21%;
	width:8%;
		padding: 10px;
			animation:opa 1s ease-in-out 3s forwards,fuwa 2s ease-in-out .2s infinite;
	opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic1{
		width:16%;
		left:38%;
		padding: 5px;
	}
}
#mv .maru .pic2{
top: 51%;
    left: 3%;
    width: 14%;
		padding: 17px;
				animation:opa 1s ease-in-out 5s forwards,fuwa 2s ease-in-out infinite;
	opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic2{
		width:28%;
		left:8%;
		padding: 8px;
	}
}
#mv .maru .pic3{
    top: 61%;
    left: 32%;
    width: 12%;
		padding: 15px;
					animation:opa 1s ease-in-out 6s forwards,fuwa 2s ease-in-out .4s infinite;
	opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic3{
		width:24%;
		top:68%;
		padding: 7px;
	}
}
#mv .maru .pic4{
top: 68%;
    left: 47%;
    width: 10%;
		padding: 15px;
					animation:opa 1s ease-in-out 4.5s forwards,fuwa 2s ease-in-out infinite;
	opacity: 0;
	z-index: 999;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic4{
		width:20%;
		top: 85%;
		left: 12%;
		padding: 7px;
	}
}
#mv .maru .pic5{
top: 43%;
    left:55%;
    width: 10%;
		padding: 15px;
					animation:opa 1s ease-in-out 5.5s forwards,fuwa 2s ease-in-out .2s infinite;
	opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic5{
		width:20%;
		top: 43%;
    left: 48%;
		padding: 7px;
	}
}
#mv .maru .pic6{
top: 63%;
    left:64%;
    width: 14%;
		padding: 15px;
					animation:opa 1s ease-in-out 3.5s forwards,fuwa 2s ease-in-out .6s infinite;
	opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic6{
		width:28%;
		top:72%;
		padding: 7px;
		left:58%;
	}
}

#mv .maru .pic7{
    top: 43%;
    left: 80%;
    width: 18%;
		padding: 15px;
						animation:opa 1s ease-in-out 4s forwards,fuwa 2s ease-in-out .4s infinite;
		opacity: 0;
}
@media only screen and (max-width:736px) {
	#mv .maru .pic7{
		width:30%;
		    top: 53%;
    left: 59%;
		padding: 7px;
	}
}
main{
	padding: 100vh 0 0 0;
}
section{
	padding: 10vh 0;
}
#intro {
	text-align: center;
		background: #fcf9f0;
	max-width: 1200px;
	margin: 0 auto;
}
@media only screen and (max-width:736px) {
	#intro {
		margin: 0 15px;
	}
}
#intro h1{
max-width: 895px;
	margin: 0 auto 2.5vh auto;
}
#intro p{
	line-height: 2;
}
#intro:after{
	content:"";
	width:211px;
	height:130px;
	background: url("../img/acc1.jpg") no-repeat;
	background-size:100%;
	display: block;
	margin: 5vh auto 0 auto;
	    mix-blend-mode: multiply;
}
@media only screen and (max-width:736px) {
#intro:after{
	width:100px;
	height:61px;
	}
}
#intro p.text span a{
	text-decoration: underline;
	transition: all .3s ease-in-out;
}
#intro p.text span a:hover{
	opacity: .7;
}
h1.title{
	text-align: center;
	margin-bottom: 2.5vh;
}
h1.title span{
	  font-family: "Cormorant Garamond", serif !important;
	 
  color: transparent;
	font-size: 65px;
	  font-weight:bold;
}
h1.title.p1 span{
	 background:url("../img/title1.jpg") no-repeat; -webkit-background-clip: text;
}
h1.title.p2 span{
	 background:url("../img/title2.jpg") no-repeat; -webkit-background-clip: text;
}
h1.title.p3 span{
	 background:url("../img/title3.jpg") no-repeat; -webkit-background-clip: text;
}
@media only screen and (max-width:736px) {
	h1.title span{
	font-size: 36px;
}
}
p.btn{
	margin: 5vh 0 2.5vh 0;
}
p.btn a{
  background-image: linear-gradient(90deg, #caba9f, #9b8579);
	padding: 20px 80px;
	color: #FFF;
	border-radius:50px;
	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.25);
	position: relative;
	font-size:20px;
}
@media only screen and (max-width:736px) {
	p.btn a{
		display: block;
			padding: 20px;
			font-size:18px;
	}
}
p.btn a:after{
	content:"";
	position: absolute;
	right:28px;
	top:50%;
	transform: translateY(-50%);
	background: url("../img/blank.svg") no-repeat;
	width:14px;
	height:13px;
}
p.btn a:before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(252,249,240,0) 0%, rgba(252,249,240,0.3) 100%);
    transform: skewX(-25deg)
}

p.btn a:hover::before {
    animation: shine 1s
}

@keyframes shine {
    100% {
        left: 125%
    }
}
#supporter{
	background: #FFF;
	border-radius: 0 50px 0 50px;
}
@media only screen and (max-width:736px) {
	#supporter{
	border-radius: 0 25px 0 25px;
}
}
h1.title + h2{
	font-size:28px;
	text-align: center;
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
}
@media only screen and (max-width:736px) {
	h1.title + h2{
	font-size:20px;
		  font-weight:normal;
	}
}
h1.title + h2:after{
	content:"";
	display: block;
	width:20px;
	height:1px;
	background: #999;
	margin: 1.5vh auto;
}
h1.title + h2 + p{
	text-align: center;
}
@media only screen and (max-width:736px) {
	h1.title + h2 + p{
	margin: 0 15px;
}
}
#supporter ul{
	margin: 5vh 0 0 0;
}
#supporter ul li{
	margin: 0 15px;
}
#supporter ul li img{
	border-radius:25px 0 25px 0;
}
#supporter ul li .pic{
	position: relative;
}
#supporter ul li .name{
	background: #FFF;
	position: absolute;
	bottom:0;
	left:0;
	width:90%;
	border-radius: 0 25px 0 0;
	padding: 1.5vh;
	box-sizing: border-box;
	height: 105px;
}
#supporter ul li .name h2{
	font-size: 22px;
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
}
@media only screen and (max-width:736px) {
	#supporter ul li .name{
		position: static;
		height: auto;
		width: auto;
		padding: 2vh 0;
	}
	#supporter ul li .name h2{
		font-size:18px;
		font-weight: normal;
	}
}
#supporter ul li .name h3{
	font-size: 14px;
	  font-weight:bold;
}
#supporter ul li .text{
	padding: 1.5vh 10% 0 1.5vh;
}
#supporter ul li .text p{
	font-size: 16px;
}
#supporter aside p{
	text-align: right;
	font-size:12px;
	color: #999;
	margin-right: 5vw;
	margin-top: 5vh;
}
@media only screen and (max-width:736px) {
	#supporter ul li .name h3{
	font-size: 13px;
	  font-weight:bold;
}
	#supporter ul li .text{
	padding:0;
}
	#supporter ul li .text p{
	font-size: 14px;
}
#supporter aside p{
		font-size:11px;
	}
}
#step ul {
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 5vh auto;
	padding: 0 50px;
}
@media only screen and (max-width:736px) {
	#step ul {
		padding: 0 15px;
	}
}
#step ul li{
	text-align: center;
	width:33%;
	position: relative;
	opacity: 0;
}
#step ul li .step{
	display:flex;
	margin: 0 auto 1.5vh auto;
	border-radius:50%;
	width:100px;
	height:100px;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width:736px) {
	#step ul li .step{
			width:70px;
	height:70px;
	}
}
#step ul li i img{
	width:15px;
	margin: 1.5vh auto 0 auto;
	display: block;
	animation:point 1s ease-in-out infinite;
	position: relative;
}
@keyframes point{
	0%{
		top:0;
	}
		50%{
		top:5px;
	}
		100%{
		top:0;
	}
}
#step ul li.step1 .step{
	background: #98c5df;
}
#step ul li.step2 .step{
	background: #7880a8;
}
#step ul li.step3 .step{
	background: #8f6897;
}
#step ul li .step p{
	font-size: 40px;
		color: #FFF;
	line-height: 1;
}
@media only screen and (max-width:736px) {
	#step ul li .step p{
		font-size: 30px;
	}
}
#step ul li .step span{
	display: block;
	color: #FFF;
	font-size:45%;
		  font-family: "Cormorant Garamond", serif !important;
}
#step ul li .text h3{
	font-size:24px;
	  font-weight:bold;
	    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
}
@media only screen and (max-width:736px) {
	#step ul li .text h3{
		font-size:18px;
	}
}
#step ul li.step1 .text h3{
		color: #98c5df;
	-webkit-text-stroke: .25px #98c5df;
}
#step ul li.step2 .text h3{
color: #7880a8;
	-webkit-text-stroke: .25px  #7880a8;
}
#step ul li.step3 .text h3{
	color: #8f6897;
	-webkit-text-stroke: .25px #8f6897;
}
#step ul li .text p small{
	font-size:85%;
	display: block;
}



#step ul li.step1:after{
	content:"";
	display: block;
	background: url("../img/bo1.png") no-repeat;
	background-size:cover;
	width:0;
	height:2px;
	position: absolute;
	top:50px;
	left:50%;
	z-index: -1;
}
#step ul li.step2:after{
	content:"";
	display: block;
	background: url("../img/bo2.png") no-repeat;
	background-size:cover;
	width:0;
	height:2px;
	position: absolute;
	top:50px;
	left:50%;
		z-index: -1;
}
@media only screen and (max-width:736px) {
	#step ul li.step1:after,
	#step ul li.step2:after{
			top:35px;
	}
}
#step ul.show li.step1{
		animation:opa 1s ease-in-out forwards;
}
#step ul.show li.step1:after{
	animation:movin 1s ease-in-out 1s forwards;
}
#step ul.show li.step2{
		animation:opa 1s ease-in-out 2s forwards;
}
#step ul.show li.step2:after{
	animation:movin 1s ease-in-out 3s forwards;
}
#step ul.show li.step3{
		animation:opa 1s ease-in-out 4s forwards;
}
@keyframes movin{
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
@keyframes opa{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.step-detail{
	position: relative;
}
@media only screen and (max-width:736px) {
	.step-detail{
	background: #FFF;
			border-radius:25px;
}
}
.step-detail.part1:before{
	content:"";
	background: #FFF;
	position: absolute;
	width:90vw;
	height:100%;
	top:0;
	left:0;
	border-radius:0 50px 50px 0;
	z-index: -1;
}
.step-detail.part1:after{
	content:"";
	position: absolute;
	top:50%;
	left:90vw;
	border-radius:0 50px 50px 0;
	z-index: -1;
	background: url("../img/acc4.jpg");
	width:49px;
	height:287px;
}
@media only screen and (max-width:736px) {
	.step-detail.part1:before,
	.step-detail.part1:after{
		display: none;
	}
}
.step-detail.part1 h1{
	position: absolute;
	left: 5%;
	top:-50px;
	width: 10%;
	max-width: 130px;
}
@media only screen and (max-width:736px) {
	.step-detail.part1 h1{
		        max-width: initial;
        width: 65%;
        position: relative;
        margin: 0 auto -70px auto;
        left: auto;
	}
}
/*---------------------------*/
.step-detail.part2{
	margin: 10vh 0;
}
@media only screen and (max-width:736px) {
	.step-detail.part2{
		margin: 15vh 0;
	}
}
.step-detail.part2:before{
	content:"";
	background: #FFF;
	position: absolute;
	width:90vw;
	height:100%;
	top:0;
	right:0;
	border-radius:50px 0 0 50px;
	z-index: -1;
}
.step-detail.part2:after{
	content:"";
	position: absolute;
	top:50%;
	right:90vw;
	border-radius:0 50px 50px 0;
	z-index: -1;
	background: url("../img/acc6.jpg");
	background-size:100%;
	width:150px;
	height:143px;
}
@media only screen and (max-width:736px) {
		.step-detail.part2:before,
	.step-detail.part2:after{
		display: none;
	}
}
.step-detail.part2 h1{
	position: absolute;
right: 5%;
	top:-50px;
	width: 10%;
	max-width: 130px;
}
@media only screen and (max-width:736px) {
	.step-detail.part2 h1{
		        max-width: initial;
        width: 65%;
        position: relative;
        margin: 0 auto -70px auto;
       right: auto;
	}
}
/*---------------------------*/
.step-detail.part3:before{
	content:"";
	background: #FFF;
	position: absolute;
	width:90vw;
	height:100%;
	top:0;
	left:0;
	border-radius:0 50px 50px 0;
	z-index: -1;
}
.step-detail.part3:after{
	content:"";
	position: absolute;
	top:50%;
	left:90vw;
	border-radius:0 50px 50px 0;
	z-index: -1;
	background: url("../img/acc7.jpg");
	width:131px;
	height:210px;
}
@media only screen and (max-width:736px) {
		.step-detail.part3:before,
	.step-detail.part3:after{
		display: none;
	}
}
.step-detail.part3 h1{
	position: absolute;
	left: 5%;
	top:-50px;
	width: 10%;
	max-width: 130px;
}
@media only screen and (max-width:736px) {
	.step-detail.part3 h1{
		        max-width: initial;
        width: 65%;
        position: relative;
        margin: 0 auto -70px auto;
        left: auto;
	}
}
/*---------------------------*/
.step-detail section{
	max-width: 1200px;
	padding: 10vh 15% 6vh 15%;
	margin: 0 auto;
}
@media only screen and (max-width:736px) {
	.step-detail section{
		padding: 10vh 15px;
	}
	.step-detail section.sympo{
		padding-bottom: 5vh;
	}
}
@media only screen and (max-width:736px) {
.step-detail section.sympo article:nth-child(3){
	margin-bottom: 10vh;
}
}
.step-detail section:last-child{
	padding-top: 0;
	position: relative;
}
.step-detail section:last-child:before{
	content:"";
	border-top:1px dotted #999;
	max-width: 1200px;
	margin: 0 auto 5vh auto;
	display: block;
}
.step-detail section:last-child:after{
	content:"";
	width:377px;
	max-width: 15%;
	height:247px;
	position: absolute;
	left:0;
	bottom:0;
	display: block;
	background: url("../img/acc5.jpg") no-repeat;
	background-size:100%;
}
@media only screen and (max-width:736px) {
	.step-detail section:last-child:after{
		display: none;
	}
	
}
.step-detail section.no-img:last-child:after{
	display: none;
}
.step-detail section.no-pa{
	padding-bottom: 5vh;
}
.step-detail section.no-bo:last-child:before{
	border: none;
	padding-top: 5vh;
}
.step-detail section .pic-big{
	margin:1.5vh 0;
}
.step-detail section .pic-big img{
	max-width: initial;
	width:100%;
	border-radius:10px;
}
.step-detail section .title{
	display: flex;
}
@media only screen and (max-width:736px) {
	.step-detail section .title{
	display: block;
		margin-bottom: 15px;
}
}
.step-detail section h2{
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
	font-size: 28px;
	margin: 0 0 1.5vh 0;
}
@media only screen and (max-width:736px) {
	.step-detail section h2{
		font-size:20px;
		text-align: center;
		 font-weight:normal;
	}
	
}
.step-detail section .title p{
position: relative;
    left: 10px;
    top: -8px;
}
.step-detail section .title p a{
background: linear-gradient(to top left, #24b578,#d8ebb1);
	display: block;
    line-height: 1.1;
    color: #FFF;
	font-size: 16px;
	    padding: 10px;
	border-radius:50%;
	text-decoration: none !important;
	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.25);
	position: relative;	text-align: center;
}
	.step-detail section .title p a .en{
		line-height: 1.2 !important;
	}
	
@media only screen and (max-width:736px) {
	.step-detail section .title p{
		position: static;
		text-align: center;
	}
	
	
.step-detail section .title p a{
	display: block;
		border-radius:50px;
	width: 50%;
	padding: 10px 10px 10px 30px;

}
	.step-detail section .title p a:before{
		content:"";
		display: block;
		width:21px;
		height:20px;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAWBJREFUSEvtldFxwkAMRFedhE6gkkAlIZWEVBJ3EjpZvDfSjXw+7JAxf3iGD/DJb7UrGcOTL3vy87EZgOSbmV1bwZsASH4B2AM4tJAuQGoAfHiRREnZqadQN0n+AlDN2cw+cxczgD9cBb1rlyEk92Y2eM2PQ9TFEMU9gNo9jup1KNREN4OZHVy1fjsDKFCS8X3SRQ9Ap1e1UgpACjFaUGrc9yJE0HSmiijnWx+Snxkgf2Xb1cx2DuhBi7gQcQ8gpSq+uEU58IuZnRwwgabsqoh7ABVGYG2Duavw/DGLkjqFLZg+pZtmggJQpubPIT/y6ojtbUZ7Msq9kOX/u+cg9bFoWjZ1UWc8xJCsuUVG3T0gqbGTNUvXbFvdnmNMWHeT86z7An2H526BupIAdTWxIXJbfNmlNmcKkxURbB3XtcxqBmObsyXpLOFs4TYFuBWrQroZrCn57/1N/nCW4C/AajQ3o6jQGR8SVWMAAAAASUVORK5CYII=");
		position: absolute;
		left:50px;
		top:6px;
}
}
.step-detail section article h3{
	background: #fcf9f0;
	text-align: center;
	font-size: 24px;
	      font-weight:bold;
-webkit-text-stroke: .5px #231f20;
	padding: 15px 0;
	margin: 3vh 0 3vh 0;
	border-radius:10px;
}
@media only screen and (max-width:736px) {
		.step-detail section .title p a:before{
			        left: 29px;
        top: 10px;
	}
	.step-detail section .title p a{
		text-align: center;
	}
	
	
	.step-detail section article h3{
	font-size: 18px;
		font-weight: normal;
	}
}
.step-detail section article h3 span{
	position: relative;
}
.step-detail section article h3.title-before span:before{
	content:"";
	position: absolute;
left: -50px;
    top: -6px;
	background: url("../img/acc2.jpg");
	background-size:40px;
	width:40px;
	height:40px;
}
.step-detail section article h3.title-after span:before{
	content:"";
	position: absolute;
left: -55px;
    top: -6px;
	background: url("../img/acc3.jpg");
	background-size:40px;
	width:40px;
	height:40px;
}
.step-detail section article .new-event{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.step-detail section article .new-event .pic{
	width:48%;
}
.step-detail section article .new-event .pic img{
	border-radius:10px;
}
.step-detail section article .new-event .text{
	width:48%;
}
@media only screen and (max-width:736px) {
	.step-detail section article .new-event{
	display: block;
}
.step-detail section article .new-event .pic{
	width:auto;
}
.step-detail section article .new-event .text{
		width:auto;
}
}
.step-detail section article .new-event .text h4,
.step-detail section article ul li .text h4{
	font-size:20px;
	  font-weight:bold;
-webkit-text-stroke: .5px #231f20;
	margin: .5vh 0;
}
@media only screen and (max-width:736px) {
	.step-detail section article .new-event .text h4,
.step-detail section article ul li .text h4{
	font-size: 17px;
	font-weight:normal;
	}
	.step-detail section article .new-event .text time,
	.step-detail section article ul li .text time{
		font-size:13px;
	}
}
.step-detail section article .new-event .text p,
.step-detail section article ul li .text p{
	font-size:16px;
}
@media only screen and (max-width:736px) {
.step-detail section article .new-event .text p,
.step-detail section article ul li .text p{
	font-size: 15px;
	}
}
.step-detail section article .new-event .text p.big{
	font-size: 18px;
}
@media only screen and (max-width:736px) {
	.step-detail section article .new-event .text p.big{
	font-size: 15px;
}
}
.step-detail section article ul{
	display: flex;
		justify-content: space-between;
	flex-wrap:wrap;
}
@media only screen and (max-width:736px) {
	.step-detail section article ul{
		display: block;
	}
}
.step-detail section article ul li{
	width:48%;
	margin-bottom: 7%;
}
@media only screen and (max-width:736px) {
	.step-detail section article ul li{
		width:auto;
		margin-bottom: 50px;
	}
}
@media only screen and (max-width:736px) {
.step-detail section article ul li:nth-last-child(-n+2){
		margin-bottom: 50px;
	}
	.step-detail section article ul li:last-child{
		margin-bottom: 0;
	}
}
.step-detail section article ul li .pic{
	margin: 0 0 1vh 0;
}
.step-detail section article ul li .pic img{
		border-radius:10px;
}
.step-detail section article ul li .text h4 small{
	font-size: 85%;
}


p.detail-btn{
	margin: 3vh 0 0 0;
}
p.detail-btn a{
  background-image: linear-gradient(90deg, #f1c0bc, #ed757e);
	padding: 15px 80px;
	color: #FFF;
	border-radius:50px;
	box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.25);
	position: relative;
	font-size:18px;
}
@media only screen and (max-width:736px) {
	p.detail-btn a{
		display: block;
		padding: 15px;
		font-size:18px;
		text-align: center;
	}
	
}
p.detail-btn a:hover{
	opacity: .7;
}
p.detail-btn a:after{
	content:"";
	position: absolute;
	right:28px;
	top:50%;
	transform: translateY(-50%);
	background: url("../img/blank.svg") no-repeat;
	width:14px;
	height:13px;
}
@media only screen and (max-width:736px) {
#questionaire {
	margin: 0 15px;
}
}
#questionaire ul{
	max-width: 1024px;
	margin: 5vh auto;
	padding: 0 50px;
}
@media only screen and (max-width:736px) {
	#questionaire ul{
		padding: 0;
	}
	
}
#questionaire ul li:not(:last-child){
	margin-bottom: 5vh;
}
#questionaire ul li dl{
	display: flex;
	align-items: center;
}
@media only screen and (max-width:736px) {
	#questionaire ul li dl{
		display: block;
	}
	
}
#questionaire ul li dl dt{
	  font-family: "Cormorant Garamond", serif !important;
	font-size:28px;
	font-weight: bold;
	border: 1px solid #333;
  padding: 10px 15px;
    margin-right: 4vh;
}
@media only screen and (max-width:736px) {
	#questionaire ul li dl dt{
		font-size: 18px;
		width:20px;
		margin: 0 auto 15px auto;
		text-align: center;
	}
}
#questionaire ul li dl dd{
		font-size:22px;
	font-weight: bold;
	-webkit-text-stroke: .5px #231f20;
}
@media only screen and (max-width:736px) {
	#questionaire ul li dl dd{
		font-size: 16px;
		font-weight:normal;
	}
}
#questionaire ul li .graph{
		display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2.5vh 0 0 90px;
}
@media only screen and (max-width:736px) {
	#questionaire ul li .graph{
		margin: 15px 0 0 0;
		display: block;
	}
}
#questionaire ul li .graph p{
	width:30%;
}
@media only screen and (max-width:736px) {
	#questionaire ul li .graph p{
	width:50%;
		margin: 0 auto;
}
}
#questionaire ul li .graph ol{
	width: 65%;
    margin-left: 5%;
}
@media only screen and (max-width:736px) {
	#questionaire ul li .graph ol{
		width:auto;
		margin:0 15px;
	}
}
#questionaire ul li .graph ol li{
	font-weight: bold;
}
@media only screen and (max-width:736px) {
	#questionaire ul li .graph ol li{
		font-size:14px;
		text-indent: -2.8em;
        padding-left: 2.8em;
	}
}
#questionaire ul li .graph ol li:not(:last-child){
	margin-bottom: 10px;
}
#questionaire ul li .graph ol li:before{
	content:"";
	display: inline-block;
	width:30px;
	height:20px;
	margin: 0 10px 0 0 ;
	position: relative;
	top:3px;
}
#questionaire ul li .graph ol li:nth-child(1):before{
		background: #bddea1;
}
#questionaire ul li .graph ol li:nth-child(2):before{
		background: #9eb2d0;
}
#questionaire ul li .graph ol li:nth-child(3):before{
		background: #f8c18f;
}
#questionaire ul li .graph ol li:nth-child(4):before{
		background: #ecc2b9;
}
#questionaire ul li .graph ol li:nth-child(5):before{
		background: #9f9f9f;
}
footer{
	width:100%;
	border-radius:50px 50px 0 0;
	background: #FFF;
	padding: 10vh 0;
}

footer:before{
	content:"";
	display: block;
	margin: 0 auto;
	width:767px;
	height:333px;
	background: url("../img/acc8.jpg") no-repeat;
	background-size:100%;
	position: relative;
	top:3px;
}
@media only screen and (max-width:736px) {
	footer{
		border-radius: 25px 25px 0 0;
	}
	footer:before{
		width:250px;
	height:108px;
	}
}
#footer {
	border: 2px solid #c49a6c;
		max-width: 1024px;
	margin: 0 auto;
	padding: 5vh 10vh;
	position: relative;
}
@media only screen and (max-width:736px) {
#footer {
	box-sizing: border-box;
	margin: 0 20px 0 15px;
	padding: 30px 25px 30px 30px;
	}
}
#footer:after{
	content:"";
	display: block;
	width:100%;
	height:100%;
		border: 2px solid #a1613d;
	position: absolute;
	top:10px;
	left:10px;
	pointer-events: none;
}
@media only screen and (max-width:736px) {
	#footer:after{
			top:5px;
	left:5px;
	}
}
#footer h2{
	color: #a6643c;
		font-weight: bold;
		-webkit-text-stroke: .5px  #a6643c;
	font-size:34px;
	text-align: center;
	margin-bottom: 2.5vh;
}
@media only screen and (max-width:736px) {
	#footer h2{
		font-size: 22px;
	}
	
}
#footer h2 + p{
	text-align: center;
}
#footer table th,
#footer table td{
	line-height: 2;
	font-weight: bold;
	font-size:22px;
}
#footer table td i{
	float: left;
	margin-right: 15px;
}
@media only screen and (max-width:736px) {
	#footer table th,
#footer table td{
	font-size:16px;
	display: block;
	line-height: 1.7;
	}
	
}
#footer table td{
	text-align: right;
}
@media only screen and (max-width:736px) {
	#footer table td{
	text-align: left;
		padding-left: 25px;
}
}
#footer table th:before{
	content: "■";
	font-size: 10px;
	color: #be1e2d;
	margin-right: 15px;
	position: relative;
	top:-5px;
}

#footer p{
	text-align: center;
}
#footer aside {
	margin: 7.5vh 0 0 0;
}
#footer aside p{
	text-align: left;
		font-size: 16px;
}
#footer .detail{
	border-bottom:1px solid rgba(161,97,61,.2);
	margin:2.5vh 0 5vh 0;
	padding-bottom: 5vh;
}
#footer .detail p,
#footer address p{
	text-align: left;
	font-size: 16px;
}
#footer address p small{
	font-size: 80%;
}
@media only screen and (max-width:736px) {
#footer .detail p,
#footer address p{
	font-size: 15px;
	}
}
#footer address p{
	line-height: 1.7;
}
#footer .detail p:last-child{
	margin-top: 2.5vh;
}
#footer .detail p em{
	color: #be1e2d;
		font-weight: bold;
	font-size: 18px;
}
@media only screen and (max-width:736px) {
	#footer .detail p em{
	font-size: 16px;
}
	
}
#footer .detail p a{
	text-decoration: underline;
		color: #be1e2d;
}
#footer .detail dl{
	display: flex;
	margin:0 0  2.5vh 0;
	font-weight: bold;
		border:1px solid rgba(161,97,61,.2);
	padding: 2.5vh;
}
@media only screen and (max-width:736px) {
	#footer .detail dl{
		display: block;
	}
}
#footer .detail dl dt{
	font-size: 22px;
	margin-right: 30px;
}
@media only screen and (max-width:736px) {
	#footer .detail dl dt{
	font-size: 18px;
		text-align: center;
		margin-right: 0;
		margin-bottom: 15px;
	}
}
#footer .detail dl dd{
	font-size: 18px;
}
@media only screen and (max-width:736px) {
	#footer .detail dl dd{
	font-size: 15px;
	}
}
footer h3{
	width:245px;
	margin: 10vh auto;
}
@media only screen and (max-width:736px) {
footer h3{
	width:50%;
}
}
footer p.copyright{
	text-align: center;
	color: #939598;
	font-size: 12px;
	letter-spacing: 0;
}
@media only screen and (max-width:736px) {
	footer p.copyright{
		font-size:10px;
	}
}
.modal-open{
	animation:ten 2s ease-in-out infinite;
}
@keyframes ten{
	0%{
		opacity: 0.3;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0.3;
	}
}</pre></body></html>