@charset "utf-8";

/* ――― アフターサービス ――― */

ul.as-menu {
	width:100%;
	margin:0 auto;
	display:flex; flex-flow:row wrap; justify-content:space-between !important; justify-content:flex-start;
}
ul.as-menu > li {
	width:31%;
	margin:0;
	padding:0;
	border: 1px solid #252222;
	box-shadow: 1px 1px 1px 0 #252222;
}
ul.as-menu > li > a { display:block; color:#252222; text-decoration:none; transition: .3s;}
ul.as-menu > li img { max-width:100%; margin:0 auto 15px; display:block;}

ul.as-menu > li > a:hover {
    opacity: .7;
}

ul.as-menu > li:nth-child(1) {
    background:#d6f6ff url("../img/as/2021-09-11-a-bg.jpg") top center repeat-y;
    background-size:100%;
}
ul.as-menu > li:nth-child(2) {
    background:#c30d23;
}

ul.as-menu li a > h4 {
	width:100%;
	height:200px;
	margin:0 auto 20px;
	padding:5px 0 0;
	display:flex; flex-flow:row wrap; justify-content:center; align-items:center; align-content:center;
	font-size:1.9em;
    font-weight:900;
	color: #e61f6f;
	text-align:center;
	line-height:1.3;
	background:#fad2dc;
}

ul.as-menu li a > h4 span {
	width:100%;
	margin:15px 0 0;
	font-size:1.1rem;
    font-weight: 700;
	line-height:1.5;
}

ul.as-menu li a > p {
	width:88%;
	margin:0 auto 15px;
    letter-spacing: 0.07em;
}
ul.as-menu li a > p.menu01-202012 {
    font-size:0.9rem;
    letter-spacing: 0;
}

/* ありがとう価格 */
dl.as-lineup {
    width:100%;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center;
}
dl.as-lineup dt {
    width:90%;
    margin-bottom: 10px;
    font-size:1.5em;
    font-weight: bold;
    color: #28b4f0;
    text-align:center;
    background: url("../img/as/202005-menu-fukidashi.jpg") bottom center no-repeat;
    background-size:contain;
}
dl.as-lineup dd {
    width:46%;
    padding:0 1%;
    position:relative;
}
dl.as-lineup dd.box02 {
    width:94%;
}
dl.as-lineup dd.box03 {
    width:30%;
}
dl.as-lineup dd:nth-of-type(4) p ,
dl.as-lineup dd.box02 p {
    width:100%;
    font-size:1em;
    text-align:center;
    left:0;
}
dl.as-lineup dd > p {
    font-size:0.8em;
    font-weight:bold;
    color:#28b4f0;
    line-height:1.1;
    letter-spacing:0;
    position:absolute;
    top:6px;
    left:10px;
    
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
                -2px 2px 0 #FFF, 2px -2px 0 #FFF,
                0px 2px 0 #FFF,  0-2px 0 #FFF,
                -2px 0 0 #FFF, 2px 0 0 #FFF;
}
dl.as-lineup dd > img {
    max-width:100%;
    margin:0 0 5px;
    border-radius: 10px;
}


/* 価格 */
ul.as-menu li a > table {
	width:100%; margin:40px auto;
	border-top:double 4px #c8c8c8;
	border-bottom:double 4px #c8c8c8;
}
ul.as-menu li > a table th ,
ul.as-menu li > a table td {
	font-size:1.1em;
	text-align:center;
	line-height:1.5;
	vertical-align: bottom;
}
ul.as-menu li > a table th {
	padding-top:20px;
}
ul.as-menu li > a table th span { font-size: 0.9em; letter-spacing: 0;}
ul.as-menu li > a table td.as-price {
	font-size:1.6em;
	font-weight:bold;
	color:#ea0012;
}
ul.as-menu li:nth-of-type(1) > a table td.as-price:nth-of-type(1) {
	color:#252222;
}
ul.as-menu li > a table small {
	width:100%;
	padding-bottom:20px;
	display:block;
	font-size:0.5em;
	font-weight:normal;
	letter-spacing:0;
}


/* メニュー① 効能一覧 */
ul.as-menu li > a > ul {
	width:90%;
	margin:0 auto;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
ul.as-menu li > a > ul li {
	width:49%;
	height:36px;
	margin:8px 0 0;
	display:flex; flex-flow:row wrap; justify-content:center; align-items:center;
	color:#fff;
	text-align: center;
	background:#32bce8;
	border-radius:30px;
}
ul.as-menu li > a > ul li:last-of-type {
	font-size:0.9em;
	letter-spacing:0;
}


/* こんなお客様にお勧め */
ul.as-menu li > a dl.target {
    width:88%;
    margin:0 auto;
}
ul.as-menu li > a dl.target dt {
	width:98%;
	margin:0 auto 15px;
	font-weight: bold;
	text-align:center;
	border: solid 3px #dedede;
	border-radius:30px;
}
ul.as-menu li > a dl.target dd {
	margin-left:0;
    margin-bottom:15px;
	font-size:0.9em;
    line-height: 1.3;
}
/* チェックマーク */
ul.as-menu li > a dl.target dd{
	padding:3px 0 0 35px;
	position:relative;
}
ul.as-menu li > a dl.target dd:before,
ul.as-menu li > a dl.target dd:after{
	content:"";
	display:block;
	position:absolute;
}
ul.as-menu li > a dl.target dd:before{
	width:18px;
	height:18px;
	background:#ffffff;
    border:2px solid #dedede;
    border-radius: 5px;
	left:0;
    top:2px;
}
ul.as-menu li > a dl.target dd:after{
	border-left:3px solid #f1464c;
	border-bottom:3px solid #f1464c;
	width:18px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:3px;
}


/* メニュー①＆③ 補足 */
ul.as-menu li > a .etc-detail {
	width:90%;
	margin: 0 auto 30px;
	padding:35px 0 20px;
	position:relative;
	border-radius: 20px;
	background:#e6fafc;
}
ul.as-menu li > a .etc-detail > img {
	max-width:125px;
	position:absolute;
	top:-18px;
	left:-33px;
}
ul.as-menu li > a .etc-detail h5 {
	font-size:1.6em;
	line-height: 1.2;
	color:#3dabb6;
	text-align:center;
}
ul.as-menu li > a .etc-detail h5 span {
	width:100%;
	margin:0 auto 10px;
	display:block;
	font-size:0.7em;
}
ul.as-menu li > a .etc-detail h5 img {
	margin:10px auto 0;
	display:block;
}
ul.as-menu li > a .etc-detail > ul {
	width:100%;
	margin:0 auto;
}
ul.as-menu li > a .etc-detail > ul li {
	margin:0 2px 0 50px;
	color:#3dabb6;
}
ul.as-menu li > a .etc-detail > table {
	margin: 0 auto;
}
ul.as-menu li > a .etc-detail > table td > span {
	color: #e60012;
}

ul.as-menu li > a .etc-detail p {
	color:#3dabb6;
	text-align:center;
}
ul.as-menu li:nth-of-type(3) > .etc-detail p b:nth-of-type(1) {
	font-size:1.5em;
}


/* メニュー② 補足 */
ul.as-menu li > a .menu02-etc {}
ul.as-menu li > a .menu02-etc ul {
	width:90%;
	margin:0 auto 20px;
	display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start;
}
ul.as-menu li > a .menu02-etc ul li {
	width:100%;
	margin: 0 0 10px;
	padding: 5px 0;
	color:#fff;
	font-size:normal;
	text-align: center;
	background:#3dabb6;
	border-radius:30px;
}

/* チラシのPDFはこちら */
.as-chirashi > dl {
	width:100%;
	margin:80px auto 100px;
}
.as-chirashi > dl dt {
	font-size:1.8em;
	font-weight: bold;
	text-align: center;
}
.as-chirashi > dl dd a {
	width:60%; margin:20px auto 0; display:block; padding: 20px 26px 20px 48px;
	text-align:center; text-decoration:none; color:#fff;
	background:#252222 url(../img/share/arrow-w.png) 24px center no-repeat;
	background-size: 8px auto;
	border-radius:100px;}



@media only screen and (max-width:1000px){

	ul.as-menu {
		width:94%;
		margin:0 auto;
		display:flex; flex-flow:row wrap; justify-content:center!important; justify-content:flex-start;
	}
	ul.as-menu > li {
		width:100%;
		margin:20px 0 30px;
		padding:0;
		border: 1px solid #252222;
		box-shadow: 1px 1px 1px 0 #252222;
	}

}


@media only screen and (max-width:640px){
	
	ul.as-menu li a > h4 {
		height:300px;
	}
	
	ul.as-menu li > a dl.target { width:90%; margin:0 auto;}
	
	ul.as-menu li > a .etc-detail {
		width:88%;
		padding:60px 0 50px;
	}
	
	ul.as-menu li > a .etc-detail > ul li {
		margin:0 2px 0 80px;
		color:#3dabb6;
	}
	
	ul.as-menu li > a .etc-detail > img {
		max-width:170px;
		position:absolute;
		top:-25px;
		left:-25px;
	}
	
	/* チラシのPDFはこちら */
	.as-chirashi > dl dd a {
		width:82%;}
	
}




.supportlist {
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-content:stretch; align-items:stretch;
}
.supportlist li {
    width:25%;
}
.supportlist a {
    width:90%;
    margin: 0 auto;
    display: block;
    text-decoration: none;
    color:#252222;
    transition: .2s;
}
.supportlist a:hover {
    opacity:0.6;
}
.supportlist h4 {padding: 12px 0 6px; font-size: 1.15em;}
.supportlist p {padding:5px 0 50px; font-size: 0.9em;}
.supportlist img {width: 100%;}

@media only screen and (max-width:900px){
	.supportTop li {width: 100%; margin: 0 0 20px;}
	.supportlist li{width: calc((100% - 40px) / 3);}
}
@media only screen and (max-width:640px){
	.supportlist li{width: calc((100% - 20px) / 2);}
}