﻿@charset "utf-8";

/* ■■■メインイメージ■■■*/

#header-bg {
background: url(../../common/images/f_bg.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 150px;
}

#title_info_mask {
background: rgba(255,255,255,0.3);
height: 100%;
}

#header-bg h3{
padding-top: 30px;
}

#header-bg .ttl01{
font-size: 34px;
font-weight: bold;
text-align: center;
line-height: 38px;
color: #274a78;
padding-top: 30px;
}

#header-bg .ttl01 span{
font-size: 20px;
font-weight: bold;
line-height: 24px;
}

#messageArea{
position: relative;
margin-top: 60px;
}

.mese_ttl01{
font-size: 24px;
font-weight: bold;
}

#messageArea .CL01{
float: left;
width: 35%;
}

#messageArea .CL01 img{
border-radius: 0 15px 15px 0;
}

#messageArea .CR01{
float: right;
width: 60%;
margin-top: 20px;
font-size: 16px;
line-height: 150%;
}

.kamokuArea{
margin: 40px auto 0 auto;
}

.kamokuArea ul{
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.kamokuArea ul li{
width: calc(25% - 13px);
text-align: center;
font-size: 20px;
font-weight: bold;
text-decoration: none;
border: 1px solid #ce89a1;
border-radius: 10px;
margin-top: 20px;
}

.kamokuArea ul li a{
text-decoration: none;
display: block;
padding: 30px 0;
}



.cont02{
margin: 20px 0 0 40px;
font-size: 16px;
line-height: 24px;
}

.contL01{
float: left;
width: 35%;
}

.contR01{
float: right;
width: 60%;
}

.contL02{
float: left;
width: 35%;
}

.contR02{
float: right;
width: 60%;
}

.contL01 img,
.contL02 img{
border-radius: 15px;
}

.fc_ado {
  position: relative;
  padding: 1em;
  background: #3F79C4;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px !important;
  color: #FFF;
  text-align: center;
}

.fc_ado:after {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 48%;
  border: 15px solid transparent;
  border-bottom: 15px solid #3F79C4;
  width: 0;
  height: 0;
}

.fc_ado a {
color: #FFF !important;
}




table.pricelist{
border-collapse:collapse;
border-spacing:0;
background-color:#ffffff;
empty-cells:show;
width: 100%;
margin-top: 20px;
table-layout: fixed;
}

.pricelist th{
border:1px solid #d9d9d9;
background-color:#f9f9f9;
padding:1em;
text-align:center;
font-size: 16px;
white-space: nowrap;
width: 30%;
}

.pricelist td{
border:1px solid #d9d9d9;
padding:1.5em 1em;
font-size: 16px;
}


table.pricelist2{
border-collapse:collapse;
border-spacing:0;
background-color:#ffffff;
empty-cells:show;
width: 100%;
margin-top: 20px;
table-layout: fixed;
}

.pricelist2 th{
border:1px solid #d9d9d9;
background-color:#f9f9f9;
padding:1em;
text-align:center;
font-size: 16px;
white-space: nowrap;
}

.pricelist2 td{
border:1px solid #d9d9d9;
padding:1.5em 1em;
font-size: 16px;
text-align:center;
}

.pricelist2 td.ty01{
text-align:left;
}

.pricelist2 td.ty02{
text-align:center;
}


.inchomese {
background: url(../../images/message_bg.png) 20px 20px no-repeat #E8E8E8;
background-size: 220px auto;
height: 250px;
margin-top: 40px;
padding: 40px 40px 40px 220px;
text-align: left;
font-size: 18px;
}

.line01{
border-bottom: 1px solid #DCDCDC;
padding-bottom: 15px;
}


.cont03{
background-image : url(../images/flow_bg.png) ;
background-position : left 15px bottom;
background-repeat: no-repeat;
padding-left: 55px;
margin-top: 30px;
}

.contL03{
float: left;
width: 60%;
}

.contR03{
float: right;
width: 35%;
}

.contR03 img{
width: 70%;
height: auto;
}

.cont04{
margin-top: 30px;
font-weight: bold;
text-align: center;
}

.contL04{
float: left;
width: 40%;
text-align: right;
}

.contR04{
float: right;
width: 40%;
text-align: left;
}

.cont05{
margin-top: 40px;
}

.contL05{
float: left;
width: 35%;
}

.contR05{
float: right;
width: 60%;
}

.contL05 img{
border-radius: 0 15px 15px 0;
}

.contR05 .cs01{
background: #e0edff;
padding: 0.6em !important;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}

.contR05 .cs01 span{
font-size: 16px;
color: #524999;
}

table.pricelist3{
border-collapse:collapse;
border-spacing:0;
background-color:#ffffff;
empty-cells:show;
width: 100%;
margin-top: 20px;
table-layout: fixed;
}

.pricelist3 th{
border:1px solid #d9d9d9;
background-color:#f9f9f9;
padding:0.5em;
text-align:center;
font-size: 16px;
white-space: nowrap;
color: #2B6EC4;
}

.pricelist3 td{
border:1px solid #d9d9d9;
padding:1.5em 1em;
font-size: 16px;
}


/*ボックス全体*/
.accbox {
margin: 2em 0;
padding: 0;
max-width: 100%;/*最大幅*/
}

/*ラベル*/
.accbox label {
display: block;
margin: 60px 0 30px 0;
padding : 20px 20px 20px 60px;
color: #FFF;
font-weight: bold;
cursor :pointer;
transition: all 0.5s;
font-size: 18px;
background : url(../images/icon_q.svg) #7A9AC4 no-repeat 20px center;
background-size: 30px 30px;
border-radius: 15px;
width: 100%;/*最大幅*/
}

/*チェックは隠す*/
.accbox input {
display: none;
}

.cont06{
margin-top: 20px;
}

.cont06 .cs01{
background: #e0edff;
padding: 0.6em !important;
font-size: 18px;
font-weight: bold;
}

.cont06 .cs01 span{
font-size: 16px;
color: #524999;
}

.contL06{
float: left;
width: calc(50% - 13px);
}

.contR06{
float: right;
width: calc(50% - 13px);
}


/* max-width: 1170px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1170px){

.kamokuArea ul li{
padding: 25px 0;
font-size: 14px;
}


}
/* max-width: 1170px @end */

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){

#header-bg {
background-attachment: fixed;
}




/*中身を非表示にしておく*/
.accbox .accshow {
padding: 0 20px 10px 60px;
overflow: hidden;
transition: 0.8s;
font-size: 16px;
background : url(../images/icon_a.svg) no-repeat 20px top;
background-size: 30px 30px;
line-height: 170%;
}

.accbox label {
cursor: default;
}




}
/* min-width: 769px @end */




/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
#messageArea{
background: none;
position: relative;
margin-top: 30px;
}


.mese_ttl01{
font-size: 18px;
}

#messageArea .CL01{
float: none;
width: 100%;
margin-top: 20px;
}

#messageArea .CL01 img{
border-radius: 15px;
}

#messageArea .CR01{
float: none;
width: 100%;
margin-top: 20px;
font-size: 16px;
line-height: 150%;
}


.kamokuArea ul{
margin-top: 0;
}

.kamokuArea ul li{
width: 100%;
font-size: 16px;
padding: 20px 0;
}



.contL01{
float: none;
width: 100%;
}

.contR01{
float: none;
width: 100%;
margin-top: 20px;
}

.contL02{
float: none;
width: 100%;
margin-top: 20px;
}

.contR02{
float: none;
width: 100%;
}

.cont06{
margin-top: 20px;
}


.cont06 .cs01{
font-size: 16px;
}




.cont02{
margin: 10px 0 0 0;
font-size: 16px;
line-height: 24px;
}

.last td:last-child {
border-bottom:1px solid #D1D2D6;
width: 100%;
}

.pricelist th,
.pricelist td {
display: block;
width: 100%;
border-bottom: none;
}


.pricelist th{
font-size: 14px;
padding:0.5em;
text-align: left;
}

.pricelist td{
font-size: 14px;
padding:0.5em;
}

.fc_ado {
font-size: 16px;
padding: 1em 0.5em 1em 1em;
}


.pricelist2 th{
font-size: 14px;
padding:0.5em;
}

.pricelist2 td{
font-size: 14px;
padding:0.5em 0.1em;
}

.inchomese {
background: url(../../images/message_bg.png) 20px bottom no-repeat #E8E8E8;
background-size: 150px auto;
height: 100%;
margin-top: 20px;
padding: 10px 10px 180px 10px;
font-size: 16px;
}

.line01{
font-size: 12px;
}

.cont03{
padding-left: 35px;
margin-top: 20px;
}


.contL03{
float: none;
width: 100%;
}

.contR03{
float: none;
width: 100%;
}

.contL05{
display: none;
}

.contR05{
float: none;
width: 100%;
}

.contL05 img{
border-radius: 15px;
}

.contR05 .cs01{
font-size: 16px;
margin-bottom: 0;
}

.contR05{
font-size: 14px;
}

.contR05 .cs01 span{
font-size: 14px;
}

.pricelist3 th,
.pricelist3 td {
display: block;
width: 100%;
border-bottom: none;
}

.pricelist3 td {
padding:1em 0.5em;
}


/*アイコンを表示*/
.accbox label:after {
content: '\f054';
font-family: 'FontAwesome';
padding-left: 8px;
width: 100%;/*最大幅*/
}


/*ラベル*/
.accbox label {
font-size: 16px;
background-size: 25px 25px;
border-radius: 10px;
margin: 20px 0;
}

.accbox label:hover {
background : url(../images/icon_q.svg) #7A9AC4 no-repeat 20px center;
background-size: 25px 25px;

}


.accbox .accshow {
overflow: hidden;
font-size: 14px;
background : url(../images/icon_a.svg) no-repeat 10px top;
background-size: 25px 25px;
padding: 0 20px;
height: 0;
opacity: 0;
transition: 0.8s;

}


.cssacc:checked + label + .accshow {
height: auto;
padding: 0 20px 20px 50px;
opacity: 1;
background : url(../images/icon_a.svg) no-repeat 10px top;
background-size: 25px 25px;
font-size: 14px;
line-height: 170%;

}

/*アイコンを入れ替える*/
.cssacc:checked + label:after {
content: '\f078';
}



}
/* max-width: 768px @end */


/* max-width: 426px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 426px){

.pricelist2 td.ty01{
font-size: 12px;
}

}
/* max-width: 426px @end */

/* max-width: 389px*/
@media screen and (max-width: 389px) {
.tbscroll {
overflow-x: auto;
}
.pricelist21 {
margin: 0 0 30px 0;
min-width: 389px;
}

}
/* max-width: 389px @end */
