@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/



/* アコーディオンA */
.ac-box{
width: auto;
margin: 30px auto 5px;
}

/*ラベル*/
.ac-box label{
max-width: 300px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #4682b4;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box label:hover{
background: #039be5;
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box input{
display: none;
}

/*チェックのアイコン（↓）*/
.ac-box label:before{
color: #fff;
font-family:"Font Awesome 5 Free";
content:" \f067";
}

/*チェックのアイコン（↑）*/
.ac-box input:checked ~ label::before {
color: #fff;
font-family:"Font Awesome 5 Free";
content:" \f068";
}

/*中身を非表示にしておく*/
.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

/*クリックで中身を表示*/
.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

/*表示内容の調整*/
.ac-box div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}


/* アコーディオンB */
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #fff;
}

.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}

.cp_actab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #4682b4;
}

.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
color: #333333;
background: #eaeaea;
}

.cp_actab .cp_actab-content p {
margin: 1em;
font-size: 14px;
}

.cp_actab p{
margin-bottom:0px;
}

/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 300em;
}

/*チェックのアイコン（↓）*/
.cp_actab label:after{
color: #fff;
font-family:"Font Awesome 5 Free";
content:" \f078";
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 3em;
}

/*チェックのアイコン（↑）*/
.cp_actab input:checked ~ label::after {
color: #fff;
font-family:"Font Awesome 5 Free";
content:" \f077";
}


/* アコーディオンA　色なし */
.ac-box2{
width: auto;
margin: 30px auto 5px;
}

/*ラベル*/
.ac-box2 label{
max-width: 600px;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #4682b4;
transition: all 0.5s;
}

/*ラベルホバー時*/
.ac-box2 label:hover{
-webkit-transition: all .3s;
transition: all .3s;
}

/*チェックを隠す*/
.ac-box2 input{
display: none;
}

/*チェックのアイコン（↓）*/
.ac-box2 label:before{
color: #4682b4;
font-family:"Font Awesome 5 Free";
content:" \f067";
}

/*チェックのアイコン（↑）*/
.ac-box2 input:checked ~ label::before {
color: #4682b4;
font-family:"Font Awesome 5 Free";
content:" \f068";
}

/*中身を非表示にしておく*/
.ac-box2 div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

/*クリックで中身を表示*/
.ac-box2 input:checked ~ div{
height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

/*表示内容の調整*/
.ac-box2 div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}

.ac-small p{
margin-bottom: 0px;
}