@charset "utf-8";


#service {}
#service .inner-sct { padding: 80px 0 150px;}
#service ul { width: 90%; max-width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
#service ul li { display: inline-block; width: 25%; padding: 18px; font-size: 24px; font-size: min(1.45vw,24px);}
#service ul li a { display: block; width: 100%; margin: 0 auto; padding: 20px 20px 30px; border: solid 2px #333; box-shadow: 5px 5px 0 #333;
 color: #000; font-weight: 700; text-decoration: none;}
#service ul li a dl dt { position: relative; width: 100%; margin-bottom: 15px; padding-top: 100%; text-align: center;}
#service ul li a dl dt img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; transition: 0.3s ease;}
#service ul li a dl dd span { display: block;}
#service ul li a:hover dl { opacity: 0.8;}
#service ul li a:hover dl dt img { transform: translate(-50%,-50%) scale(1.05);}
@media (max-width: 801px) {
	#service ul li { width: 33%; padding: 12px; font-size: 2.4vw;}
}
@media (max-width: 641px) {
	#service ul li { width: 50%;}
}
@media (max-width: 481px) {
	#service .inner-sct { padding: 32px 0 80px;}
	#service ul li { padding: 8px; font-size: 16px;}
	#service ul li a { padding: 16px 10px 18px; border-width: 1px; box-shadow: 3px 3px 0 #333;}
	#service ul li a dl dt { margin-bottom: 8px; padding-top: 85%;}
}


#reform {}
#reform .inner-sct { padding: 80px 0 150px;}
#reform .wrap-flex { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 88%; max-width: 1200px; margin: 0 auto;}
#reform .main-ctn { width: 78%;}
#reform .side-ctn { width: 20%;}
#reform .main-ctn .box { width: 100%; margin-bottom: 40px; padding: 40px; background: #F0F0F0; box-shadow: 12px 12px 0 #003C88;}
#reform .main-ctn .box .box-flex { display: flex; justify-content: space-between;}
#reform .main-ctn .box .pht { width: 45%;}
#reform .main-ctn .box .txt { position: relative; width: 52%;}
#reform .main-ctn .box .txt .tit { margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #707070;}
#reform .main-ctn .box .txt .tit h3 { color: #003C88; font-size: 32px; font-size: min(2.2vw,32px); font-weight: 700; letter-spacing: 0.05rem; line-height: 1.4;}
#reform .main-ctn .box .txt p { font-size: 21px; font-size: min(1.35vw,21px); letter-spacing: 0.05rem;}
#reform .main-ctn .box .txt ul { margin-bottom: 10px; padding-top: 8px; font-size: 0;}
#reform .main-ctn .box .txt ul li { display: inline-block; margin-right: 10px; padding: 5px 0px; font-size: 16px;}
#reform .main-ctn .box .txt ul li span { display: block; padding: 2px 10px; border: solid 1px #707070;}
#reform .main-ctn .box .txt .arw { margin-bottom: 6px; padding-left: 4em;}
#reform .main-ctn .box .txt .arw:before { content: ''; display: block; width: 0px; height: 0px;
 border: solid 10px transparent; border-top: solid 16px #947150; border-bottom: 0px;
}

#reform .main-ctn .box .txt p.price1 { margin-bottom: 12px; font-size: 16px; line-height: 1;}
#reform .main-ctn .box .txt p.price1 span { font-size: 21px; font-size: min(1.35vw,21px);}
#reform .main-ctn .box .txt p.price1 span em { font-size: 32px; font-size: min(2.2vw,32px);}
#reform .main-ctn .box .txt p.price2 { color: #003C88; line-height: 1; font-weight: 700;}
#reform .main-ctn .box .txt p.price2 em { margin-right: 6px; font-size: 80px; font-size: min(8.0vw,80px); line-height: 1;}
#reform .main-ctn .box .txt p.price2 ruby { font-size: 32px; font-size: min(2.2vw,32px);ruby-position: over;}
#reform .main-ctn .box .txt p.price2 ruby rt { font-size: 14px; text-align: center;}
#reform .main-ctn .box .txt .badge { position: absolute; right: 0px; bottom: 0px; width: 10vw; max-width: 160px; z-index: 2;}
#reform .main-ctn .box .txt .badge:after { content: ''; display: block; width: 100%; padding-top: 100%;
 background: #FFB300; box-shadow: 5px 5px 0 #A07102; border-radius: 50%;
}
#reform .main-ctn .box .txt .badge div { position: absolute; left: 0; top: 50%; transform: translateY(-48%); width: 100%; z-index: 2;}
#reform .main-ctn .box .txt .badge div p { color: #003C88; font-size: 20px; font-size: min(1.25vw,20px); font-weight: 700; line-height: 1; text-align: center;}
#reform .main-ctn .box .txt .badge div p span.tag-1 { display: block; font-size: 23px; font-size: min(1.35vw,23px);}
#reform .main-ctn .box .txt .badge div p em { display: inline-block; vertical-align: baseline; margin-right: 2px; font-size: 60px; font-size: min(5.8vw,60px); line-height: 1;}
#reform .main-ctn .box .txt .badge div p span.aside { display: inline-block; vertical-align: baseline;}
#reform .main-ctn .box .txt .badge div p span.aside .per { display: block; font-size: 28px; font-size: min(1.55vw,28px); letter-spacing: 0; text-align: left;}
#reform .main-ctn .box .txt .badge div p span.aside .off { position: relative; display: block; font-size: 14px;transform: scaleX(0.8); text-indent: -4px}

#reform .main-ctn .box .txt .badge div p ruby { display: inline-block; vertical-align: baseline; ruby-position: under; font-size: 28px; font-size: min(1.55vw,28px); letter-spacing: 0; text-align: left;}
#reform .main-ctn .box .txt .badge div p ruby rt { font-size: 14px;}

#reform .main-ctn .box .pht figure {}
#reform .main-ctn .box .pht figure img { width: 100%;}

#reform hr { width: 100%; height: 1px; border: none; margin: 0 auto 80px;}
#reform .appeal { width: 100%; background: #F0F0F0; border: solid 4px #003C88;}
#reform .appeal .tit { padding: 12px 0; background: #003C88;}
#reform .appeal .tit h3 { color: #fff; font-size: 42px; font-size: min(3.0vw,42px); font-weight: 700; text-align: center;}
#reform .appeal .box-flex { display: flex; justify-content: space-between; padding: 30px;}
#reform .appeal .price1 { position: relative; width: 50%; background: #fff;}
#reform .appeal .price2 { position: relative; width: 38%; background: #fff;}
#reform .appeal .plus { position: relative; width: 12%;}
#reform .appeal .price1 .basic { padding: 8px 0; background: #FFB300;}
#reform .appeal .price1 .basic p { color: #fff; font-size: 21px; font-size: min(1.35vw,21px); font-weight: 700; text-align: center;}
#reform .appeal .price1 p.price { color: #003C88; font-weight: 700; text-align: center;}
#reform .appeal .price1 p.price em { margin-right: 10px; font-size: 64px; font-size: min(6.0vw,64px);}
#reform .appeal .price1 p.price ruby { font-size: 32px; font-size: min(2.2vw,32px);}
#reform .appeal .price1 p.price ruby rt { font-size: 14px; text-align: left;}
#reform .appeal .price2 p { position: absolute; top: 50%; width: 100%; padding-right: 50%; transform: translateY(-50%);
 color: #003C88; font-size: 32px; font-size: min(2.2vw,32px); font-weight: 700; text-align: center;
}
#reform .appeal .price2 img { position: absolute; top: 50%; transform: translateY(-50%); right: 10%; width: auto; height: 80%;}
#reform .appeal .plus:before,
#reform .appeal .plus:after { content: ''; display: block; width: 60%; height: 10px; background: #947150; position: absolute; left: 50%; top: 50%;}
#reform .appeal .plus:before{ transform: translate(-50%,-50%);}
#reform .appeal .plus:after { transform: translate(-50%,-50%) rotate(90deg);}
#reform .appeal .detail { position: relative; padding: 0 30px 30px;}
#reform .appeal .detail:before { content: ''; display: block; width: 100%; height: 1px; margin: 0 auto 30px; border-top: dashed 1px #707070;}
#reform .appeal .detail p { margin-bottom: 12px; color: #003C88; font-size: 32px; font-size: min(2.2vw,32px); font-weight: 700; text-align: center;}
#reform .appeal .detail ul { font-size: 0; text-align: center;}
#reform .appeal .detail ul li { position: relative; display: inline-block; width: 20%; padding: 6px 0; color: #003C88; font-size: 21px; font-size: min(1.35vw,21px);}
#reform .appeal .detail ul li:after { content: ''; display: block; width: 92%; padding-top: 92%; margin: 0 auto; background: #fff; border-radius: 50%;}
#reform .appeal .detail ul li span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;}
#reform .appeal .detail ul li span em { display: block; font-weight: 700;}
#reform .appeal .detail ul li span img { display: block; width: auto; height: 60px; margin: 8px auto 0;}

#reform .side-ctn ul { text-align: center;}
#reform .side-ctn ul li { margin: 0 auto 20px;}
#reform .side-ctn ul li:last-child { margin-bottom: 0px;}
#reform .side-ctn ul li a { display: block; width: 100%; padding: 0; background: #eee;}
#reform .side-ctn ul li a:hover { opacity: 0.8;}
#reform .side-ctn img { width: 100%;}

@media (max-width: 1281px) {
	#reform .main-ctn .box { box-shadow: 8px 8px 0 #003C88;}
	#reform .main-ctn .box .txt .badge div p em { font-size: 48px; font-size: min(4.8vw,48px);}
}
@media (max-width: 1001px) {
	#reform .main-ctn .box { padding: 20px;}
	#reform .main-ctn .box .pht { width: 40%;}
	#reform .main-ctn .box .txt { width: 58%;}
	#reform .main-ctn .box .txt .badge { width: 10vw; bottom: 0px;}
	#reform .main-ctn .box .txt .badge div p { font-size: 1.2vw;}
	#reform .main-ctn .box .txt .badge div p span.tag-1 { font-size: 12px;}
	#reform .main-ctn .box .txt .badge div p em { font-size: 4.8vw;}
	#reform .main-ctn .box .txt ul li { font-size: 14px;}
	#reform .appeal .detail ul li { font-size: 16px;}
}
@media (max-width: 801px) {
	#reform .wrap-flex { display: block;}
	#reform .main-ctn { width: 100%; margin-bottom: 60px;}
	#reform .side-ctn { width: 100%;}

	#reform .main-ctn .box .txt p.price1 { margin-bottom: 12px;}
	#reform .main-ctn .box .txt p.price1 span { font-size: 2.4vw;}
	#reform .main-ctn .box .txt p.price1 span em { font-size: 3.2vw;}
	#reform .main-ctn .box .txt .arw { margin-bottom: 8px; padding-left: 2.5em;}
	#reform .main-ctn .box .txt .badge { width: 14vw;}
	#reform .main-ctn .box .txt .badge div p { font-size: 14px;}
	#reform .main-ctn .box .txt .badge div p em { font-size: 5.2vw;}
	#reform .main-ctn .box .txt .badge div p span.aside .per { font-size: 2.4vw;}

	#reform .main-ctn .box .txt .badge div p ruby { font-size: 2.4vw;}
	#reform .main-ctn .box .txt .badge div p ruby rt { font-size: 14px;}
	#reform .main-ctn .box .txt .tit h3 { font-size: 2.8vw;}
	#reform .main-ctn .box .txt p { font-size: 16px;}
	#reform .main-ctn .box .txt ul { padding-top: 12px;}

	#reform hr { margin: 0 auto 60px;}

	#reform .appeal .price1 .basic { padding: 4px 0;}
	#reform .appeal .price1 .basic p { font-size: 2.4vw;}
	#reform .appeal .price2 p { font-size: 3.2vw;}
	#reform .appeal .detail p { margin-bottom: 8px; font-size: 3.2vw;}
	#reform .appeal .detail ul li { font-size: 2.1vw;}
	#reform .appeal .detail ul li span img { margin: 4px auto 0;}

	#reform .side-ctn { width: 80%; max-width: 400px; margin: 0 auto;}
}
@media (max-width: 641px) {
	#reform .main-ctn .box { padding: 30px;}
	#reform .main-ctn .box .box-flex { display: block;}
	#reform .main-ctn .box .pht { width: 100%; margin-bottom: 20px;}
	#reform .main-ctn .box .txt { width: 100%;}
	#reform .main-ctn .box .txt p.price2 ruby { font-size: 3.2vw;}
	#reform .main-ctn .box .txt p.price2 ruby rt { font-size: 12px;}
	#reform .main-ctn .box .pht figure { text-align: center;}
	#reform .main-ctn .box .pht figure img { width: 80%;}

	#reform .main-ctn .box .txt p.price1 { font-size: 20px;}
	#reform .main-ctn .box .txt p.price1 span { font-size: 21px;}
	#reform .main-ctn .box .txt p.price1 span em { font-size: 30px;}

	#reform .main-ctn .box .txt p.price2 em { font-size: 12.0vw;}
	#reform .main-ctn .box .txt p.price2 ruby { font-size: 6.0vw;}

	#reform .main-ctn .box .txt .badge { width: 20vw;}
	#reform .main-ctn .box .txt .badge div p { font-size: 2.0vw;}
	#reform .main-ctn .box .txt .badge div p span.tag-1 { font-size: 2.4vw}
	#reform .main-ctn .box .txt .badge div p em { font-size: 8.0vw;}
	#reform .main-ctn .box .txt .badge div p span.aside .per { font-size: 16px;}
	#reform .main-ctn .box .txt .badge div p span.aside .off { font-size: 10px; text-indent: -2px}
	#reform .main-ctn .box .txt .badge div p ruby { font-size: 16px;}
	#reform .main-ctn .box .txt .badge div p ruby rt { font-size: 10px;}

	#reform .appeal .box-flex { display: block; width: 85%; max-width: 400px; margin: 0 auto; padding: 20px 20px 30px;}
	#reform .appeal .price1 { position: relative; width: 100%;}
	#reform .appeal .price2 { position: relative; width: 100%; padding: 15px 0;}
	#reform .appeal .plus { position: relative; width: 100%; height: 60px;}
	#reform .appeal .plus:before,
	#reform .appeal .plus:after { width: 40px; height: 10px;}
	#reform .appeal .price2 p { position: relative; top: auto; transform: translateY(0%); font-size: 5.0vw}
	#reform .appeal .price2 img { width: auto; height: 90%;}
	#reform .appeal .detail ul li { width: 32%;}
}
@media (max-width: 481px) {
	#reform .inner-sct { padding: 40px 0 60px;}
	#reform .main-ctn .box { box-shadow: 5px 5px 0 #003C88;}
	#reform .main-ctn .box .pht { margin-bottom: 12px;}
	#reform .main-ctn .box .txt .tit h3 { font-size: 20px;}
	#reform .main-ctn .box .txt p { font-size: 14px;}
	#reform .main-ctn .box .txt ul { padding-top: 6px;}
	#reform .main-ctn .box .txt ul li { font-size: 12px;}
	#reform .main-ctn .box .txt .badge { right: -10px; bottom: 0px; width: 90px;}
	#reform .main-ctn .box .txt .badge:after { box-shadow: 3px 3px 0 #A07102;}
	#reform .main-ctn .box .txt .badge div p span.tag-1 { font-size: 13px;}
	#reform .main-ctn .box .txt .badge div p em { font-size: 36px;}

	#reform .main-ctn .box .txt p.price1 { font-size: 14px;}
	#reform .main-ctn .box .txt p.price1 span { font-size: 16px;}
	#reform .main-ctn .box .txt p.price1 span em { font-size: 23px;}

	#reform .main-ctn .box .txt p.price2 em { font-size: 64px;}
	#reform .main-ctn .box .txt p.price2 ruby { font-size: 18px;}
	#reform .main-ctn .box .txt p.price2 ruby rt { font-size: 12px;}

	#reform hr { margin: 0 auto 40px;}
	
	#reform .appeal .tit { padding: 6px 0;}
	#reform .appeal .tit h3 { font-size: 21px;}
	#reform .appeal .box-flex {}
	#reform .appeal .price1 { padding-bottom: 6px;}
	#reform .appeal .price1 .basic { margin-bottom: 8px; padding: 2px 0;}
	#reform .appeal .price1 .basic p { font-size: 18px;}
	#reform .appeal .price1 p.price em { font-size: 36px;}
	#reform .appeal .price1 p.price ruby { font-size: 18px;}
	#reform .appeal .price1 p.price ruby rt { font-size: 12px;}

	#reform .appeal .price2 { padding: 25px 0;}
	#reform .appeal .price2 p { font-size: 24px;}

	#reform .appeal .plus { height: 50px;}
	#reform .appeal .plus:before,
	#reform .appeal .plus:after { width: 30px; height: 6px;}

	#reform .appeal .detail{ padding: 0 20px 20px;}
	#reform .appeal .detail:before { margin: 0 auto 16px;}
	#reform .appeal .detail p { margin-bottom: 8px; font-size: 20px;}
	#reform .appeal .detail ul li { padding: 4px 0; font-size: 12px;}
	#reform .appeal .detail ul li span img { height: 36px;}
}