@charset "utf-8";
/* CSS Document */
@media screen and (max-width:767px) {
.pcOnly {
display: none;
}
}
@media screen and (min-width:768px) {
.spOnly {
display: none;
}
}
#container{
font-family: 'Noto Sans JP',  "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
color:#222222;
}



/*--------------------------------------
#maebarai
--------------------------------------*/

#maebarai{
padding: 0 32px 48px 32px;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai{
padding: 0 16px;
}
}
#maebarai a{
transition: 0.2s ease-out;
}
#maebarai a:hover{
opacity: 0.64;
}



#maebarai #maebarai-hero{
margin: 0 -32px;
background: #0071be;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-hero{
margin: 0 -16px;
}
}
#maebarai #maebarai-hero h1{
}
#maebarai #maebarai-hero h1 img{
width: 100%;
height: 400px;
object-fit: cover;
object-position: top;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-hero h1 img{
height: 100%;
}
}
#maebarai #maebarai-hero ul{
max-width: 960px;
margin: auto;
padding: 8px 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-hero ul{
padding: 4px 6px 8px 6px;
}
}
#maebarai #maebarai-hero ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#maebarai #maebarai-hero ul li{
font-size: 15px;
line-height: 19px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
text-align: center;
position: relative;
float: left;
width: calc(50% - 4px);
height: 44px;
border-radius: 22px;
background: #fff;
margin: 0 8px 0 0;
padding: 10px 0 0 212px;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-hero ul li{
font-size: 13px;
line-height: 17px;
letter-spacing: 0;
float: none;
width: 100%;
height: 32px;
border-radius: 16px;
margin: 4px 0 0 0!important;
padding: 6px 0 0 172px;
}
}
#maebarai #maebarai-hero ul li:nth-child(2){
margin: 0;
}
#maebarai #maebarai-hero ul li span{
font-size: 15px;
line-height: 19px;
letter-spacing: 0.4px;
font-weight: 500;
color: #FFF;
text-align: center;
display: block;
position: absolute;
top: 0;
left: 0;
width: 216px;
height: 44px;
border-radius: 22px 0 0 22px;
background: #222;
padding: 10px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-hero ul li span{
font-size: 13px;
line-height: 17px;
letter-spacing: 0;
width: 172px;
height: 32px;
border-radius: 16px 0 0 16px;
padding: 6px 0 0 0;
}
}



#maebarai #maebarai-contents{
max-width: 960px;
margin: auto;
}
#maebarai #maebarai-contents p{
font-size: 17px;
line-height: 25px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
text-align: center;
padding: 40px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents p{
font-size: 15px;
line-height: 23px;
padding: 24px 0 0 0;
}
}
#maebarai #maebarai-contents p strong:nth-child(2){
font-size: 17px;
line-height: 25px;
letter-spacing: 0.4px;
font-weight: 700;
color: #d7373d;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents p strong:nth-child(2){
font-size: 15px;
line-height: 23px;
}
}
#maebarai #maebarai-contents p strong:nth-child(4){
font-size: 17px;
line-height: 25px;
letter-spacing: 0.4px;
font-weight: 700;
color: #222;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents p strong:nth-child(4){
font-size: 15px;
line-height: 23px;
}
}
#maebarai #maebarai-contents p small{
font-size: 13px;
line-height: 21px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
display: block;
margin: 8px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents p small{
font-size: 11px;
line-height: 19px;
}
}
#maebarai #maebarai-contents figure{
text-align: center;
margin: 28px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents figure{
margin: 20px 0 0 0;
}
}
#maebarai #maebarai-contents figure img{
max-width: 608px;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents figure img{
max-width: 100%;
}
}
#maebarai #maebarai-contents figure small{
font-size: 13px;
line-height: 21px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
display: block;
margin: 8px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents figure small{
font-size: 11px;
line-height: 19px;
}
}
#maebarai #maebarai-contents .entry{
padding: 24px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents .entry{
padding: 16px 0 0 0;
}
}
#maebarai #maebarai-contents .entry a{
font-size: 21px;
line-height: 25px;
letter-spacing: 0.8px;
font-weight: 700;
color: #FFF;
text-align: center;
display: inline-block;
width: 320px;
height: 64px;
border-radius: 32px;
background: #d7373d;
padding: 17px 0 0 0;
filter: drop-shadow(0 8px 4px rgba(0,0,0,0.16));
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-contents .entry a{
width: 240px;
}
}



#maebarai #maebarai-banner{
max-width: 960px;
margin: auto;
}
#maebarai #maebarai-banner p{
padding: 64px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-banner p{
padding: 32px 0 0 0;
}
}
#maebarai #maebarai-banner p a img{
border-radius: 16px;
}



#maebarai #maebarai-outline{
max-width: 960px;
margin: auto;
padding: 64px 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline{
padding: 32px 0 0 0;
}
}
#maebarai #maebarai-outline table{
border-bottom: 1px solid #ddd;
}
#maebarai #maebarai-outline table th{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
font-weight: 700;
color: #222;
border-top: 1px solid #ddd;
width: 180px;
padding: 20px 0 24px 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline table th{
display: block;
width: 100%;
padding: 20px 0 0 0;
}
}
#maebarai #maebarai-outline table td{
vertical-align: middle;
border-top: 1px solid #ddd;
padding: 20px 0 24px 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline table td{
display: block;
border-top: none;
padding: 16px 0 24px 0;
}
}
#maebarai #maebarai-outline table td p{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
margin: 0;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline table td p{
font-size: 13px;
line-height: 21px;
}
}
#maebarai #maebarai-outline table td ul li{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
font-weight: 400;
color: #222;
text-indent: -15px;
margin: 0 0 0 15px;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline table td ul li{
font-size: 13px;
line-height: 21px;
text-indent: -13px;
margin: 0 0 0 13px;
}
}
#maebarai #maebarai-outline table td a{
font-size: 15px;
line-height: 23px;
letter-spacing: 0.4px;
font-weight: 400;
color: #0071be;
transition: 0.2s ease-out;
}
@media screen and (max-width:767px) {
#maebarai #maebarai-outline table td a{
font-size: 13px;
line-height: 21px;
}
}


