@charset "utf-8";
/* CSS Document */
@media all {
	h3,
	h4,
	h5,
	th{
		margin: 0;
		font-weight: normal;
	}
	body {
		margin: 0;
		font-family: "source-han-serif-jp-subset", sans-serif;/*源ノ明朝R*/
		font-weight: 400;
		font-style: normal;
	}
	header .textbox .h1sub,
	h1,
	#linksarea,
	h2,
	#plan .plans,
	#plan .plans strong{
		font-weight: 300;/*源ノ明朝 light*/
	}
	#accessMap h2,
	#accessMap address,
	#accessInfo{
		font-weight: 500;/*源ノ明朝 medium*/
	}
	#forParents #kuretakeso .note,
	#forParents #recommendedFor,
	#contents h3,
	.linkA,
	#voice .voicebox li .textbox .title,
	#voice .voicebox li .textbox .detail,
	#plan .h2sub,
	#giftOverview,
	#flow,
	#faq .note,
	#faq .faqbox dl dt,
	.transportation li{
		font-weight: 600;/*源ノ明朝 semibold*/
	}
	p,
	ul,
	ol,
	li,
	dl,
	dt,
	dd{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	iframe{
		border: 0;
	}
	a {
		text-decoration: none;
		transition: .3s;
		color: #000;
	}
	a.apply{
		display: block;
		width: calc(100% - 80px);
		max-width: 385px;
		margin: 0 auto;
	}
	a.linkA,
	a.linkB{
		display: block;
		width: 283px;
		margin: 0 auto;
		font-size: 1.3rem;
		color: #fff;
		padding: 1em;
		border: solid 1px #fff;
	}
	a.linkA{
		background: #7a714b;
	}
	a.linkB{
		background: #000;
	}
	a.linkA span,
	a.linkB span{
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding-left: 1.5em;
		position: relative;
	}
	a.linkA span::before,
	a.linkB span::before{
		content: "";
		position: absolute;
		top: 4px;
		left: 0;
		width: 14px;
		height: 14px;
		background: url("/images/icon_arrow-wh.png") no-repeat;
		background-size: contain;
		background-position: center;
	}
	a:hover {
		opacity: .7;
	}
	img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	*{
		box-sizing: border-box;
	}
	
	
	header{
		position: relative;
	}
	header .logo{
		position: absolute;
		top: 45px;
		left: 50px;
		width: 155px;
	}
	header .textbox{
		position: absolute;
		bottom: 3.5vw;
		left: 50%;
		transform: translateX(-50%);
		width: fit-content;
		text-align: center;
		color: #fff;
	}
	header .textbox .image{
		width: 100%;
		max-width: 220px;
		margin: 0 auto 10px;
	}
	header .textbox .h1sub{
		font-size: 1.6rem;
		letter-spacing: 0.3em;
	}
	header .textbox h1{
		font-size: 2.2rem;
		margin: 0;
		letter-spacing: 0.3em;
	}
	.headerImage{
		width: 100%;
	}
	
	#linksarea{
		padding: 40px 20px;
	}
	#linksarea .links{
		font-size: 1.6rem;
		width: 100%;
		max-width: 32em;
		margin: 0 auto;
		display: table;
		letter-spacing: 0.2em;
	}
	#linksarea .links li{
		display: table-cell;
		padding: 0 1em;
	}
	#linksarea .links li a{
		display: block;
		padding-left: 18px;
		position: relative;
	}
	#linksarea .links li a::before{
		position: absolute;
		content: "";
		width: 15px;
		height: 15px;
		top: 5px;
		left: 0;
		background: url("/images/icon_arrow-bk.png") no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	#forParents{
		padding: 40px 0 40px;
		background: url("/images/background.jpg");
	}
	h2{
		font-size: 3rem;
		letter-spacing: 0.1em;
		text-align: center;
		margin-bottom: 10px;
	}
	.h2sub{
		font-size: 1rem;
		letter-spacing: 0.3em;
		text-align: center;
		margin-bottom: 40px;
	}
	#forParents .image{
		width: calc(100% - 40px);
		max-width: 400px;
		margin: 0 auto 40px;
		position: relative;
	}
	#forParents .image .date{
		position: absolute;
		bottom: 4%;
		left: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 1.8rem;
		letter-spacing: .2em;
	}
	#forParents .image .date span{
		font-size: 1.4rem;
		display: inline-block;
		transform: translateY(-0.3em);
	}
	#forParents .image .date i{
		font-size: 1.2rem;
	}
	#forParents #kuretakeso,
	#forParents #recommendedFor{
		width: calc(100% - 40px);
		max-width: 926px;
		margin: 0 auto 80px;
	}
	#forParents #kuretakeso h3{
		display: block;
		width: 173px;
		margin: 0 auto 40px;
	}
	#forParents #kuretakeso .note{
		font-size: 1.6rem;
		margin-bottom: 3em;
	}
	#forParents #kuretakeso .text{
		font-size: 1.4rem;
		margin-bottom: 3.5em;
	}
	#forParents #kuretakeso .note,
	#forParents #kuretakeso .text{
		text-align: center;
		line-height: 2;
		letter-spacing: .2em;
	}
	#forParents #recommendedFor{
		margin: 0 auto 40px;
	}
	#recommendedFor h3{
		font-size: 2rem;
		display: block;
		width: 100%;
		padding: 0.7em;
		background: #a39569;
		color: #fff;
		text-align: center;
	}
	#recommendedFor .list{
		width: 100%;
		background: #fff;
		padding: 30px;
	}
	#recommendedFor ul{
		width: fit-content;
		margin: 0 auto;
		padding-left: 50px;
		counter-reset: number 0;
	}
	#recommendedFor ul li{
		font-size: 1.6rem;
		padding: 1em 0;
		border-bottom: solid 1px #a39569;
		position: relative;
	}
	#recommendedFor ul li::before{
		counter-increment: number 1;
		content: counter(number);
		position: absolute;
		top: 0.05em;
		left: -0.8em;
		font-size: 4.2rem;
		line-height: 1;
		color: #a39569;
		transform: translateX(-50%);
	}
	#recommendedFor ul li:last-child{
		border-bottom: none;
	}
	
	#contents{
		padding: 80px 20px;
		background: #a39569;
		color: #fff;
	}
	#contents .detail{
		width: 100%;
		max-width: 926px;
		margin: 0 auto 30px;
		display: flex;
		flex-wrap: wrap;
	}
	#contents .detail li{
		width: 20%;
		padding: 0 5px 25px;
		font-size: 1.4rem;
		text-align: center;
	}
	#contents .detail li:first-child,
	#contents .detail li:nth-child(2){
		width: 50%;
		font-size: 2rem;
	}
	#contents .detail li .title{
		padding: 0.5em 0.5em 0;
	}
	#contents .detail li .title span{
		letter-spacing: -0.15em;
	}
	#contents .detail li .free{
		color: #ffe900;
	}
	#contents h3{
		font-size: 1.8rem;
		display: block;
		width: 100%;
		max-width: 926px;
		margin: 0 auto 20px;
		padding: 0.7em;
		background: #891318;
		color: #fff;
		text-align: center;
	}
	#contents .text{
		font-size: 1.4rem;
		line-height: 2;
		text-align: center;
		width: 100%;
		max-width: 926px;
		margin: 0 auto 40px;
	}
	
	#reason{
		padding: 40px 0 100px;
		background: url("/images/background.jpg");
	}
	#reason article{
		width: 100%;
		margin-bottom: 40px;
		color: #fff;
		display: flex;
	}
	#reason article:nth-child(3){
		background: #71b27b;
	}
	#reason article:nth-child(4){
		background: #bda0bc;
	}
	#reason article:nth-child(5){
		background: #57b0d0;
	}
	#reason article .imagebox{
		width: 53%;
	}
	#reason article .textbox{
		width: 47%;
		padding: 10px 70px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#reason article .textbox .point{
		font-size: 1.6rem;
		padding-bottom: 1em;
		position: relative;
		margin-bottom: 1em;
	}
	#reason article .textbox .point span{
		font-size: 3rem;
	}
	#reason article .textbox .point::after{
		content: "";
		position: absolute;
		bottom: 0;
		left: calc(50% - 24px);
		width: 48px;
		height: 1px;
		background: #fff;
	}
	#reason article .textbox h3{
		font-size: 1.7rem;
		margin-bottom: 1em;
	}
	#reason article .textbox .text{
		font-size: 1.2rem;
		text-align: justify;
		line-height: 1.8;
		letter-spacing: 0.2em;
	}
	
	#photoGallery{
		padding: 60px 0 80px;
		background: #000;
	}
	#photoGallery h2{
		color: #a39569;
		letter-spacing: 0.15em;
	}
	#photoGallery .h2sub{
		color: #fff;
		letter-spacing: 0.3em;
	}
	#photoGallery .images{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 80px;
	}
	#photoGallery .images li{
		width: calc(100% / 3);
		border: solid #fff;
	}
	#photoGallery .images li:first-child{
		width: 50%;
		border-width: 0 1px 1px 0;
	}
	#photoGallery .images li:nth-child(2){
		width: 50%;
		border-width: 0 0 1px 1px;
	}
	#photoGallery .images li:nth-child(3){
		border-width: 1px 1px 0 0;
	}
	#photoGallery .images li:nth-child(4){
		border-width: 1px 1px 0 1px;
	}
	#photoGallery .images li:last-child{
		border-width: 1px 0 0 1px;
	}
	#photoGallery .movie{
		width: calc(100% - 40px);
		max-width: 1074px;
		margin: 0 auto;
	}
	#photoGallery .movie video{
		width: 100%;
	}
	
	#voice{
		padding: 40px 20px 50px;
		background: #a39569;
		color: #fff;
	}
	#voice .voicebox{
		width: 100%;
		max-width: 1100px;
		margin: 0 auto 10px;
		display: flex;
		justify-content: space-around;
	}
	#voice .voicebox li{
		width: calc(100% / 3 - 15px);
		background: #fff;
		color: #000;
	}
	#voice .voicebox li .textbox{
		padding: 20px 30px;
	}
	#voice .voicebox li .textbox .title{
		font-size: 1.8rem;
		padding-bottom: 0.5em;
		text-align: center;
	}
	#voice .voicebox li .textbox .detail{
		font-size: 1.4rem;
		line-height: 1.8;
		padding-bottom: 1em;
		text-align: center;
		border-bottom: solid 1px #000;
		margin-bottom: 1em;
	}
	#voice .voicebox li .textbox .text{
		font-size: 1.2rem;
		line-height: 1.8;
		text-align: justify;
	}
	#voice .note{
		font-size: 1rem;
		letter-spacing: 0.2em;
		text-align: center;
	}
	
	#plan{
		padding: 40px 0 80px;
		text-align: center;
		background: url("/images/background.jpg");
	}
	#plan h2{
		margin-bottom: 1em;
	}
	#plan .h2sub{
		font-size: 2rem;
		letter-spacing: 0.05em;
		width: 100%;
		max-width: 940px;
		margin: 0 auto 40px;
		background: #891318;
		color: #fff;
		padding: 0.7em;
	}
	#plan .explanation{
		font-size: 1.4rem;
		letter-spacing: 0.2em;
		line-height: 1.8;
		margin-bottom: 40px;
	}
	#plan .plans{
		width: 100%;
		max-width: 940px;
		margin: 0 auto;
		display: flex;
	}
	#plan .plans > li{
		width: calc(100% / 3);
		padding: 0 10px;
	}
	#plan .plans li .box{
		width: 100%;
		background: #e5e6e0;
		border: solid 1px #c5c5c3;
		padding: 15px 30px 30px;
	}
	#plan .plans li .box .name{
		font-size: 2.16rem;
		margin-bottom: 10px;
	}
	#plan .plans li .box .name span{
		font-size: 4.5rem;
	}
	#plan .plans li .box .option{
		font-size: 1.2rem;
		width: 100%;
		height: 4em;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 5px;
	}
	#plan .plans li:first-child .box .option{
		background: #ea8c5a;
	}
	#plan .plans li:nth-child(2) .box .option{
		background: #da5b4b;
	}
	#plan .plans li:last-child .box .option{
		background: #d60040;
	}
	#plan .plans li .box .zeroyen{
		width: 100%;
		background: #500002;
		font-size: 1.2rem;
		color: #fff;
		padding: 0.7em;
	}
	#plan .plans li .box .price{
		width: 100%;
		margin-bottom: 10px;
	}
	#plan .plans li .box .price li{
		display: flex;
		border-bottom: solid 1px #777;
		position: relative;
	}
	#plan .plans li .box .price li::after{
		content: "―";
		position: absolute;
		width: 17px;
		height: 17px;
		background: #000;
		color: #fff;
		text-align: center;
		border-radius: 50%;
		bottom: -9px;
		left: calc(50% - 9px);
		font-size: 1.2rem;
	}
	#plan .plans li .box .price li:last-child::after{
		width: 0;
		height: 0;
	}
	#plan .plans li .box .price li:nth-child(2){
		color: #bc181f;
	}
	#plan .plans li .box .price li .subject{
		font-size: 1.26rem;
		text-align: left;
		padding-left: 2em;
		width: 35%;
		display: flex;
		align-items: center;
	}
	#plan .plans li .box .price li .cost{
		font-size: 1.8rem;
		text-align: right;
		padding-right: 1.7em;
		width: 65%;
	}
	#plan .plans li .box .price li .cost span{
		font-size: 4.15rem;
	}
	#plan .plans li .box .text{
		font-size: 1.3rem;
		padding-bottom: 1.3em;
		position: relative;
		color: #bc181f;
	}
	#plan .plans li .box .text::after{
		position: absolute;
		content: "";
		background: url("/images/arrow_red.svg") no-repeat;
		background-size: contain;
		width: 1.4rem;
		height: 1.4rem;
		bottom: 0;
		left: calc(50% - 0.6em);
	}
	#plan .plans li .box .total{
		font-size: 2rem;
		line-height: 0.9;
		margin-bottom: 15px;
	}
	#plan .plans li .box .total span{
		font-size: 1.43rem;
	}
	#plan .plans li .box .total strong{
		font-size: 13.28rem;
		color: #bc181f;
	}
	#plan .plans li .box .note{
		font-size: 1.08rem;
	}
	
	#giftOverview{
		padding: 40px 20px 80px;
		background: #a39569;
		color: #fff;
	}
	#giftOverview dl{
		width: 100%;
		max-width: 926px;
		margin: 0 auto 60px;
	}
	#giftOverview dl dt{
		font-size: 2rem;
		background: #584309;
		text-align: center;
		padding: 0.7em;
	}
	#giftOverview dl dd{
		font-size: 1.4rem;
		line-height: 1.7;
		text-align: justify;
	}
	#giftOverview dl dd.text{
		padding: 30px 100px 90px;
	}
	#giftOverview dl dd.date{
		font-size: 1.9rem;
		padding: 1.5em 0 1.7em;
		text-align: center;
	}
	#giftOverview dl dd.date span{
		font-size: 4.8rem;
		margin: 0 0.1em 0  0.3em;
	}
	#giftOverview .requirements{
		padding: 40px 0 50px;
	}
	#giftOverview .requirements ul{
		width: fit-content;
		margin: 0 auto;
		padding-left: 60px;
		counter-reset: number 0;
	}
	#giftOverview .requirements ul li{
		font-size: 1.6rem;
		letter-spacing: 0.1em;
		padding: 1em 0.5em 1em 0;
		border-bottom: solid 1px #fff;
		position: relative;
	}
	#giftOverview .requirements ul li::before{
		counter-increment: number 1;
		content: counter(number);
		position: absolute;
		top: 0.05em;
		left: -1em;
		font-size: 4.2rem;
		line-height: 1;
		color: #fff;
		transform: translateX(-50%);
	}
	#giftOverview .requirements ul li:last-child{
		border-bottom: none;
	}
	#giftOverview .notes{
		padding: 30px 0 0;
	}
	#giftOverview .notes ul{
		width: fit-content;
		margin: 0 auto;
	}
	#giftOverview .notes ul li{
		font-size: 1.4rem;
	}
	
	#flow{
		padding: 40px 20px 50px;
		background: url("/images/background.jpg");
	}
	#flow article{
		width: 100%;
		max-width: 926px;
		min-height: 304px;
		margin: 0 auto 20px;
		position: relative;
		background: #fff;
		border: solid 1px #7a714b;
	}
	#flow article::before{
		content: "";
		position: absolute;
		top: 0;
		left: 40px;
		width: 54px;
		height: 78px;
	}
	#flow article:nth-child(3)::before{
		background: url("/images/arrow_label-01.png") no-repeat;
		background-size: contain;
	}
	#flow article:nth-child(4)::before{
		background: url("/images/arrow_label-02.png") no-repeat;
		background-size: contain;
	}
	#flow article:nth-child(5)::before{
		background: url("/images/arrow_label-03.png") no-repeat;
		background-size: contain;
	}
	#flow article:nth-child(6)::before{
		background: url("/images/arrow_label-04.png") no-repeat;
		background-size: contain;
	}
	#flow article:nth-child(7)::before{
		background: url("/images/arrow_label-05.png") no-repeat;
		background-size: contain;
	}
	#flow article h3{
		display: block;
		font-size: 1.6rem;
		background: #a39569;
		color: #fff;
		padding: 1em 1em 1em 110px;
	}
	#flow article h3 span{
		color: #ff0;
	}
	#flow article .textbox .flowlink span{
		display: block;
		padding-left: 1.5em;
		position: relative;
	}
	#flow article .textbox .flowlink span::before{
		content: "";
		position: absolute;
		top: 4px;
		left: 0;
		width: 14px;
		height: 14px;
		background: url("/images/icon_arrow-bk.png") no-repeat;
		background-size: contain;
		background-position: center;
	}
	
	#attention{
		padding: 40px 20px 80px;
		background: #891318;
		color: #fff;
	}
	#attention h2{
		margin-bottom: 0;
	}
	#attention .text{
		font-size: 1.6rem;
		line-height: 2;
		text-align: center;
	}
	#attention .text span{
		color: #ff0;
	}
	
	#faq{
		padding: 40px 20px 80px;
		background: url("/images/background.jpg");
	}
	#faq .faqbox{
		width: 100%;
		max-width: 1019px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#faq .faqbox dl{
		width: calc(50% - 40px);
		margin-bottom: 80px;
	}
	#faq .faqbox dl dt{
		font-size: 1.5rem;
		letter-spacing: 0;
		color: #891318;
		margin-bottom: 1em;
		padding-left: 2em;
		text-indent: -2em;
	}
	#faq .faqbox dl dd{
		font-size: 1.4rem;
		letter-spacing: 0.2em;
		text-align: justify;
		line-height: 2;
		padding-left: 1.5em;
		position: relative;
	}
	#faq .faqbox dl dd::before{
		position: absolute;
		top: 0;
		left: 0;
	}
	#faq .faqbox dl dd::before{
		content: "A.";
	}
	#faq .faqbox dl dd a{
		text-decoration: underline;
	}
	#faq .note{
		font-size: 1.8rem;
		line-height: 1.7;
		text-align: center;
		margin-bottom: 40px;
	}
	#faq .links{
		width: 100%;
		max-width: 594px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	#faq .links li{
		width: fit-content;
	}
	
	footer{
		padding: 60px 0 10px;
		background: #9b9b9b;
		color: #fff;
		text-align: center;
	}
	footer a{
		color: #fff;
	}
	footer h2{
		font-size: 2.4rem;
		margin-bottom: 0.3em;
	}
	footer .address{
		font-size: 1.4rem;
		margin-bottom: 30px;
	}
	#accessMap .maparea{
		width: 100%;
		max-width: 1114px;
		margin: 0 auto 40px;
	}
	#accessMap .maparea iframe{
		width: 100%;
		height: 430px;
		vertical-align: bottom;
		-webkit-filter: brightness(100%) grayscale(100%);
		-moz-filter: brightness(100%) grayscale(100%);
		-ms-filter: brightness(100%) grayscale(100%);
		-o-filter: brightness(100%) grayscale(100%);
		filter: brightness(100%) grayscale(100%);
	}
	.transportation{
		width: calc(100% - 20px);
		max-width: 1000px;
		margin: 0 auto 80px;
		display: flex;
	}
	.transportation li{
		width: 50%;
		display: flex;
	}
	.transportation li .imagebox{
		padding: 0 30px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.transportation li#train .imagebox{
		width: 40%;
	}
	.transportation li#car .imagebox{
		width: 30%;
	}
	.transportation li .imagebox::after{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 1px; 
		height: 100%;
		background: #fff;
	}
	.transportation li .imagebox .image{
		width: 50px;
		margin: 0 auto 10px;
	}
	.transportation li .imagebox .text{
		font-size: 1.5rem;
	}
	.transportation li ul.textbox{
		width: 70%;
		padding: 0 30px;
		text-align: left;
		font-size: 1.4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.transportation li#train .textbox{
		width: 60%;
	}
	.transportation li#car .textbox{
		width: 70%;
	}
	.transportation li ul.textbox li{
		width: 100%;
		line-height: 2;
	}
	#accessInfo{
		width: calc(100% - 40px);
		max-width: 1114px;
		margin: 0 auto;
		position: relative;
		padding-bottom: 40px;
	}
	#accessInfo .logo{
		position: absolute;
		bottom: 25px;
		left: 0;
		width: 170px;
	}
	#accessInfo .tel-address{
		width: fit-content;
		margin: 0 360px 0 auto;
	}
	#accessInfo .tel-address .text{
		font-size: 1.4rem;
	}
	#accessInfo .tel-address a.link{
		font-size: 4.45rem;
	}
	#accessInfo .site{
		position: absolute;
		display: block;
		font-size: 1.6rem;
		top: 50%;
		right: 50px;
		transform: translateY(-50%);
		width: 266px;
		padding: 0.5em;
		border: solid 1px #fff;
		text-align: center;
	}
	#copyright{
		font-size: 1.2rem;
		letter-spacing: .2em;
		padding-bottom: 2em;
	}
	
}

@media screen and (max-width: 768px){
	html{
		font-size: 12px;
		letter-spacing: 0.1em;
	}

	a.linkA{
		width: 100%;
		padding: 1.3em;
	}
	
	header .logo{
		top: 25px;
		left: 25px;
		width: 110px;
	}
	header .textbox{
		bottom: 2vw;
		width: 100%;
	}
	header .textbox .image{
		max-width: 140px;
		margin: 0 auto 5px;
	}
	header .textbox .h1sub{
		font-size: 1rem;
	}
	header .textbox h1{
		font-size: 1.5rem;
	}
	
	#linksarea{
		padding: 30px 10px;
	}
	#linksarea .links{
		font-size: 0.96rem;
		max-width: 29em;
	}
	#linksarea .links li{
		padding: 0 0.5em;
	}
	#linksarea .links li a{
		padding-left: 13px;
	}
	#linksarea .links li a::before{
		width: 12px;
		height: 12px;
		top: 3px;
		left: 0;
	}
	
	#forParents{
		padding: 30px 0 60px;
		background: url("/images/background_sp.jpg");
	}
	h2{
		font-size: 1.8rem;
		margin-bottom: 5px;
	}
	.h2sub{
		font-size: 0.8rem;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	#forParents .image .date{
		font-size: 1.4rem;
	}
	#forParents .image .date span{
		font-size: 0.7rem;
	}
	#forParents .image .date i{
		font-size: 0.6rem;
	}
	#forParents #kuretakeso h3{
		width: 140px;
		margin: 0 auto 20px;
	}
	#forParents #kuretakeso .note{
		font-size: 1.2rem;
	}
	#forParents #kuretakeso .text{
		font-size: 1rem;
		text-align: justify;
	}
	#recommendedFor h3{
		font-size: 1.2rem;
		padding: 0.7em;
	}
	#recommendedFor .list{
		padding: 10px 20px;
	}
	#recommendedFor ul{
		width: 100%;
		padding-left: 30px;
	}
	#recommendedFor ul li{
		font-size: 1.2rem;
		padding: 0.7em 0;
	}
	#recommendedFor ul li::before{
		top: 1em;
		left: -1em;
		font-size: 1.89rem;
	}
	
	#contents{
		padding: 40px 20px;
	}
	#contents .detail{
		margin: 0 auto 10px;
	}
	#contents .detail li{
		width: 50%;
		font-size: 1.2rem;
	}
	#contents .detail li:first-child,
	#contents .detail li:nth-child(2){
		width: 100%;
		font-size: 1.2rem;
	}
	#contents .detail li .title{
		padding: 0.5em 0 0;
	}
	#contents h3{
		font-size: 1.4rem;
		margin: 0 auto 20px;
		padding: 1.5em;
	}
	#contents .text{
		font-size: 1rem;
		margin: 0 auto 20px;
	}
	
	#reason{
		padding: 30px 0 40px;
		background: url("/images/background_sp.jpg");
	}
	#reason article{
		margin-bottom: 30px;
		flex-direction: column;
	}
	#reason article .imagebox{
		width: 100%;
	}
	#reason article .textbox{
		width: 100%;
		padding: 40px 20px 50px;
	}
	#reason article .textbox .point{
		font-size: 0.85rem;
	}
	#reason article .textbox .point span{
		font-size: 1.59rem;
	}
	#reason article .textbox .point::after{
		left: calc(50% - 16px);
		width: 32px;
	}
	#reason article .textbox h3{
		font-size: 1.2rem;
		text-align: center;
	}
	#reason article .textbox .text{
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	
	#photoGallery{
		padding: 20px 0 40px;
	}
	#photoGallery .images{
		margin-bottom: 40px;
	}
	
	#voice{
		padding: 20px 20px 30px;
	}
	#voice .h2sub{
		margin-bottom: 30px;
	}
	#voice .voicebox{
		margin: 0 auto 10px;
		flex-direction: column;
	}
	#voice .voicebox li{
		width: 100%;
		margin-bottom: 20px;
	}
	#voice .voicebox li:last-child{
		margin-bottom: 0;
	}
	#voice .voicebox li .textbox .title{
		font-size: 1.4rem;
	}
	#voice .voicebox li .textbox .detail{
		font-size: 1rem;
		padding-bottom: 1.5em;
		margin-bottom: 1.5em;
	}
	#voice .voicebox li .textbox .text{
		font-size: 1rem;
		letter-spacing: 0.2em;
	}
	#voice .note{
		font-size: 0.9rem;
	}
	
	#plan{
		padding: 40px 20px 20px;
		background: url("/images/background_sp.jpg");
	}
	#plan .h2sub{
		font-size: 1.4rem;
		padding: 1.5em;
		margin: 0 auto 20px;
	}
	#plan .explanation{
		font-size: 1rem;
		text-align: left;
	}
	#plan .plans{
		flex-direction: column;
	}
	#plan .plans > li{
		width: 100%;
		padding: 0;
		margin-bottom: 20px;
	}
	#plan .plans li .box{
		padding: 5px 20px 20px;
	}
	#plan .plans li .box .name{
		margin-bottom: 5px;
	}
	#plan .plans li .box .option{
		font-size: 1rem;
		height: 3.5em;
	}
	#plan .plans li .box .zeroyen{
		font-size: 1rem;
		margin-bottom: 10px;
	}
	#plan .plans li .box .price{
		display: flex;
		justify-content: center;
		border-bottom: solid 1px #777;
		margin-bottom: 0;
	}
	#plan .plans li .box .price li{
		width: calc(100% / 3);
		flex-direction: column;
		border-bottom: none;
		position: relative;
		padding: 0 1.1em 1em;
	}
	#plan .plans li .box .price li::after{
		width: 15px;
		height: 15px;
		bottom: calc(50% - 7px);
		left: auto;
		right: -7px;
		font-size: 0.9rem;
	}
	#plan .plans li .box .price li .subject{
		font-size: 1rem;
		text-align: center;
		padding-left: 0;
		width: 100%;
		justify-content: center;
	}
	#plan .plans li .box .price li .cost{
		font-size: 1rem;
		line-height: 1;
		text-align: center;
		padding-right: 0;
		width: 100%;
	}
	#plan .plans li .box .price li .cost span{
		font-size: 2.3rem;
	}
	#plan .plans li .box .totalbox{
		position: relative;
	}
	#plan .plans li .box .totalbox .text{
		position: absolute;
		top: 35px;
		right: 47%;
		width: fit-content;
		font-size: 1rem;
		padding: 0 1.5em 0 0;
	}
	#plan .plans li .box .totalbox .text::after{
		transform: rotate(-90deg);
		width: 1rem;
		height: 1rem;
		bottom: 0.1em;
		left: auto;
		right: 0;
	}
	#plan .plans li .box .total{
		font-size: 1.8rem;
		padding-left: 70px;
		margin-bottom: 5px;
	}
	#plan .plans li .box .total span{
		font-size: 1.2rem;
		display: inline-block;
		transform: translate(-0.5em,-0.5em);
	}
	#plan .plans li .box .total strong{
		font-size: 8rem;
		display: inline-block;
		transform: translateX(0.05em);
	}
	#plan .plans li .box .note{
		font-size: 0.8rem;
	}
	
	#giftOverview{
		padding: 20px 20px 60px;
		background: #a39569;
		color: #fff;
	}
	#giftOverview dl dt{
		font-size: 1.4rem;
		padding: 0.7em;
	}
	#giftOverview dl dd{
		font-size: 1rem;
		line-height: 2;
	}
	#giftOverview dl dd.text{
		padding: 1.5em 0 3em;
	}
	#giftOverview dl dd.date{
		font-size: 1.1rem;
		padding: 0 0 2em;
	}
	#giftOverview dl dd.date span{
		font-size: 2.9rem;
	}
	#giftOverview .requirements{
		padding: 20px 20px 40px;
	}
	#giftOverview .requirements ul{
		width: 100%;
		padding-left: 35px;
	}
	#giftOverview .requirements ul li{
		font-size: 1rem;
	}
	#giftOverview .requirements ul li::before{
		top: 0.5em;
		left: -1.3em;
		font-size: 1.89rem;
	}
	#giftOverview .notes{
		padding: 20px 0 0;
	}
	#giftOverview .notes ul li{
		font-size: 1rem;
		letter-spacing: 0.2em;
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	
	#flow article::before{
		content: "";
		position: absolute;
		top: 0;
		left: 20px;
		width: 50px;
		height: 72px;
	}
	#flow article h3{
		font-size: 1.2rem;
		padding: 1em 1em 1em 85px;
	}
	#flow article .textbox{
		padding: 30px 20px 20px 20px;
		line-height: 1.7;
	}
	#flow article .textbox .h3sub{
		font-size: 1.2rem;
		margin-bottom: 1em;
	}
	#flow article .textbox .note{
		font-size: 1rem;
		text-align: justify;
		margin-bottom: 1.5em;
		color: #f00;
	}
	#flow article .image{
		width: 100%;
		margin-bottom: 20px;
	}
	#flow article .textbox .flowlink{
		display: flex;
		font-size: 1.3rem;
		width: 90%;
		height: 3em;
		border: solid 1px #7a714b;
		border-radius: 1.5em;
		margin: 0 auto;
		justify-content: center;
		align-items: center;
	}
	#flow article .textbox .flowlink span::before{
		top: 6px;
		left: 0;
		width: 16px;
		height: 16px;
	}
	
	#attention .h2sub{
		letter-spacing: 0.3em;
	}
	#attention .text{
		font-size: 1rem;
		letter-spacing: 0.15em;
		line-height: 2.5;
		text-align: justify;
	}
	
	#faq{
		padding: 40px 20px 60px;
	}
	#faq .h2sub{
		letter-spacing: 0.3em;
	}
	#faq .faqbox dl{
		width: 100%;
		margin-bottom: 40px;
	}
	#faq .faqbox dl:first-child{
		order: 1;
	}
	#faq .faqbox dl:nth-child(3){
		order: 2;
	}
	#faq .faqbox dl:nth-child(5){
		order: 3;
	}
	#faq .faqbox dl:nth-child(2){
		order: 4;
	}
	#faq .faqbox dl:nth-child(4){
		order: 5;
	}
	#faq .faqbox dl:nth-child(6){
		order: 6;
	}
	#faq .faqbox dl dt{
		font-size: 1.2rem;
		width: fit-content;
		margin: 0 auto 1em;
		text-align: center;
		padding-left: 0;
		text-indent: 0;
	}
	#faq .faqbox dl dd{
		font-size: 1rem;
	}
	#faq .note{
		font-size: 1.2rem;
	}
	#faq .links{
		flex-direction: column;
	}
	#faq .links li{
		width: 100%;
		margin-bottom: 10px;
	}
	#faq .links li .linkB{
		width: 100%;
	}
	
	footer{
		padding: 20px 0 15px;
	}
	footer h2{
		font-size: 1.8rem;
		margin-bottom: 0;
	}
	footer .address{
		font-size: 1rem;
		margin-bottom: 20px;
	}
	#accessMap .maparea iframe{
		height: 330px;
	}
	.transportation{
		flex-direction: column;
		max-width: 370px;
		margin: 0 auto 10px;
	}
	.transportation > li{
		width: 100%;
		margin-bottom: 20px;
	}
	.transportation li .imagebox{
		padding: 0;
	}
	.transportation li#train .imagebox,
	.transportation li#car .imagebox{
		width: 30%;
	}
	.transportation li .imagebox .image{
		width: 40px;
		margin: 0 auto 5px;
	}
	.transportation li .imagebox::after{
		top: 10%;
		height: 80%;
	}
	.transportation li .imagebox .text{
		font-size: 0.9rem;
	}
	.transportation li ul.textbox{
		font-size: 0.8rem;
		padding: 0 20px;
	}
	.transportation li#train .textbox,
	.transportation li#car .textbox{
		width: 70%;
	}
	#accessInfo{
		max-width: 430px;
		padding: 0 0 100px 110px;
	}
	#accessInfo .logo{
		top: 0;
		bottom: auto;
		width: 90px;
	}
	#accessInfo .tel-address{
		width: 100%;
		margin: 0 20px 0 0;
		text-align: left;
	}
	#accessInfo .tel-address .text{
		font-size: 1rem;
		letter-spacing: 0.08em;
	}
	#accessInfo .tel-address .text span{
		display: inline-block;
	}
	#accessInfo .tel-address a.link{
		font-size: 2.4rem;
	}
	#accessInfo .site{
		font-size: 1.3rem;
		bottom: 30px;
		top: auto;
		right: 50%;
		transform: translateX(50%);
		width: 240px;
		padding: 0.7em;
	}
	#copyright{
		font-size: 0.7rem;
		padding-bottom: 1em;
	}
	
	.pd{display: none;}
	.pc{display: none;}
	.pdpc{display: none;}
	
}

@media screen and (min-width: 769px) and (max-width: 1024px){
	html{
		font-size: 8px;
		letter-spacing: 0.05em;
	}
	
	a.linkA span::before,
	a.linkB span::before{
		top: 3px;
		left: 0;
		width: 12px;
		height: 12px;
	}
	
	#linksarea .links li a::before{
		width: 13px;
		height: 13px;
		top: 4px;
	}
	
	#reason article:nth-child(4){
		flex-direction: row-reverse;
	}
	
	#voice .voicebox li .textbox{
		padding: 14px;
	}
	
	#flow article .textbox{
		padding: 40px 52% 60px 35px;
		line-height: 1.7;
		position: relative;
	}
	#flow article .textbox .h3sub{
		font-size: 1.6rem;
		margin-bottom: 1em;
	}
	#flow article .textbox .note{
		font-size: 1.2rem;
		text-align: justify;
		margin-bottom: 1.5em;
		color: #f00;
	}
	#flow article .image{
		position: absolute;
		width: 50%;
		top: -25px;
		right: 0;
		padding: 0 25px 25px;
	}
	#flow article .textbox .flowlink{
		position: absolute;
		bottom: 25px;
		left: 27%;
		transform: translateX(-50%);
		display: flex;
		font-size: 1.3rem;
		width: 225px;
		height: 3em;
		border: solid 1px #7a714b;
		border-radius: 1.5em;
		justify-content: center;
		align-items: center;
	}
	#flow article .textbox .flowlink span::before{
		top: 3px;
		left: 0;
		width: 12px;
		height: 12px;
	}
	
	#accessInfo .logo{
		bottom: 40px;
		width: 135px;
	}
	
	.sp{display: none;}
	.pc{display: none;}

}

@media screen and (min-width: 1025px), print{
	html{
		font-size: 10px;
		letter-spacing: 0.05em;
	}

	#reason article:nth-child(4){
		flex-direction: row-reverse;
	}
	
	#flow article .textbox{
		min-height: 247px;
		padding: 40px 52% 60px 35px;
		line-height: 1.7;
		position: relative;
	}
	#flow article .textbox .h3sub{
		font-size: 1.6rem;
		margin-bottom: 1em;
	}
	#flow article .textbox .note{
		font-size: 1.2rem;
		text-align: justify;
		margin-bottom: 1.5em;
		color: #f00;
	}
	#flow article .image{
		position: absolute;
		width: 50%;
		top: -25px;
		right: 0;
		padding: 0 25px 25px;
	}
	#flow article .textbox .flowlink{
		position: absolute;
		bottom: 25px;
		left: 27%;
		transform: translateX(-50%);
		display: flex;
		font-size: 1.3rem;
		width: 225px;
		height: 3em;
		border: solid 1px #7a714b;
		border-radius: 1.5em;
		justify-content: center;
		align-items: center;
	}

	.sp{display: none;}
	.pd{display: none;}
	.sppd{display: none;}

}