@charset "UTF-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Copyright (c) Best Bridge LLC. All Rights Reserved.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Original source code and design structure.
Unauthorized reproduction prohibited.

閲覧・学習目的での参照は問題ありませんが、
本コードおよびデザイン構造の全部または一部を、
無断で複製・流用・再配布することを禁止します。

本コードは制作履歴・公開履歴・電子署名等により
権利保全を行っています。

本コード特有の
設計思想／構造設計／命名規則／記述順／レイアウト構成
には識別性があります。

一般的CSSとは異なる独自設計のため、
類似構造や類似記述は、
コード圧縮／難読化／改行変更／変数化後でも、
構造的特徴および設計パターンから
識別・照合可能です。

無断流用・模倣・構造複製が確認された場合、
利用停止要請・権利侵害通知・法的措置を含む
対応を行う場合があります。
*/

/*==============================================================
section details.graybox（グレー箱）
==============================================================*/
/*==箱==*/
section details.graybox{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin-bottom:30px;
border:solid 1px #EFEFEF;
border-radius:5px;
padding:0;
background-color:#EFEFEF;
}

/*==箱タイトル==*/
section details.graybox>summary{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
border-radius:5px;
padding:20px 36px 20px 20px;
background-color:#EFEFEF;
/*--*/
text-align:left;
line-height:1.6;
font-size:1rem;
font-weight:bold;
color:#555;
/*--*/
cursor:pointer;
list-style:none;
transition:.3s;
}

/*==summaryの三角アイコン非表示Webkit用==*/
section details.graybox>summary::-webkit-details-marker{
display:none;
}

/*==矢印（横線）==*/
section details.graybox>summary::before{
position:absolute;
/*--*/
top:50%;
right:10px;
display:block;
width:20px;
height:4px;
margin:0;
border:0;
padding:0;
background-color:#999;
/*--*/
content:'';
transform:translateY(-50%);
}

/*==矢印（縦線）==*/
section details.graybox>summary::after{
position:absolute;
/*--*/
top:50%;
right:10px;
display:block;
width:20px;
height:4px;
margin:0;
border:0;
padding:0;
background-color:#999;
/*--*/
content:'';
transform:translateY(-50%) rotate(90deg);
transition:.5s;
}

/*==detailsが展開された時、矢印の縦線を回転させる==*/
section details.graybox[open]>summary::after{
transform:translateY(-50%) rotate(0);
transition:.5s;
}

@media (hover:hover) and (pointer:fine){
section details.graybox>summary:hover{
opacity:0.7;
}
}

/*==箱中身==*/
section details.graybox>div{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
border-radius:0 0 10px 10px;
padding:20px 36px 0 20px;
background-color:#EFEFEF;
}

/*==箱中身を閉じる==*/
section details.graybox>div>div.close_btn{
position:relative;
/*--*/
display:block;
width:180px;
height:auto;
margin:0 auto 20px auto;
border:0;
border-radius:50px;
padding:10px;
background-color:#FFF;
/*--*/
text-align:center;
line-height:1;
font-size:0.9rem;
font-weight:bold;
color:#666;
text-decoration:none;
/*--*/
cursor:pointer;
transition:.3s;	
}

@media (hover:hover) and (pointer:fine){
section details.graybox>div>div.close_btn:hover{
opacity:.7;
}
}

/*==============================================================
section details.whitebox（白箱）
==============================================================*/
section details.whitebox{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin-bottom:30px;
border:solid 3px #DDD;
border-radius:5px;
padding:0;
background-color:#FFF;
}

/*==箱タイトル==*/
section details.whitebox>summary{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
border-radius:5px;
padding:10px 36px 10px 10px;
background-color:#FFF;
/*--*/
text-align:left;
line-height:1.6;
font-size:1rem;
font-weight:bold;
color:#666;
/*--*/
cursor:pointer;
list-style:none;
transition:.3s;
}

/*==summaryの三角アイコン非表示Webkit用==*/
section details.whitebox>summary::-webkit-details-marker{
display:none;
}

/*==矢印（横線）==*/
section details.whitebox>summary::before{
position:absolute;
top:50%;
right:10px;
/*--*/
display:block;
width:20px;
height:4px;
margin:0;
border:0;
padding:0;
background-color:#999;
/*--*/
content:'';
transform:translateY(-50%);
}

/*==矢印（縦線）==*/
section details.whitebox>summary::after{
position:absolute;
top:50%;
right:10px;
/*--*/
display:block;
width:20px;
height:4px;
margin:0;
border:0;
padding:0;
background-color:#999;
/*--*/
content:'';
transform:translateY(-50%) rotate(90deg);
transition:.5s;
}

/*==detailsが展開された時、矢印の縦線を回転させる==*/
section details.whitebox[open]>summary::after{
transform:translateY(-50%) rotate(0);
transition:.5s;
}

@media (hover:hover) and (pointer:fine){
section details.whitebox>summary:hover{
opacity:.7;
}
}

/*==箱中身==*/
section details.whitebox>div{
position:relative;
/*--*/
display:block;
width:100%;
height:auto;
margin:0;
border:0;
border-radius:0 0 10px 10px;
padding:20px 36px 0 20px;
background-color:#FFF;
}

/*==箱中身を閉じる==*/
section details.whitebox>div>div.close_btn{
position:relative;
/*--*/
display:block;
width:180px;
height:auto;
margin:0 auto 20px auto;
border:0;
border-radius:50px;
padding:10px;
background-color:#EFEFEF;
/*--*/
text-align:center;
line-height:1;
font-size:0.9rem;
font-weight:bold;
color:#666;
text-decoration:none;
/*--*/
cursor:pointer;
transition:.3s;	
}

@media (hover:hover) and (pointer:fine){
section details.whitebox>div>div.close_btn:hover{
opacity:.7;
}
}