@charset "utf-8";

/* ===================================================
   Arasowan Content (あらそわん解説ページ専用スタイル)
=================================================== */

/* レイアウト・セクション */
section {
    background: #FFF;
    max-width: 1200px;
    width: 61.8%;
    text-shadow: none;
    padding: 200px 0px 0px 0px;
}

#space {
    min-height: 50px;
}

.name {
    padding: 10px 0px 0px 0px;
}

.mgr-10 {
    margin-right: 10px;
}

/* パソコンでは改行させない */
.sp-br {
    display: none;
}

/* リスト設定 */
.section ol,
ul {
    list-style-type: disc;
    padding: 0px 20px 0px 40px;
}

/* 脚注（PC表示: 80%） */
#footnote ol {
    font-size: 80%;
    line-height: 1.6;
    padding: 10px 15px 0px 15px;
}

/* 関係資料（横並びブロック） */
.flex {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.flex>* {
    width: 30%;
    height: auto;
    background: #fff;
    font-size: 100%;
    text-align: center;
    border: 1px solid #fff;
}

/* テーブル設定 */
table {
    margin-left: 0px;
    margin-right: auto;
    border-collapse: separate;
    border-spacing: 5px;
    padding: 0px 0px 0px 20px;
}

colgroup.area1 {
    width: 50%;
}

colgroup.area2 {
    width: 260px;
}

colgroup.area3 {
    width: 30px;
}

colgroup.area4 {
    width: 100%;
}

/* 写真・画像 */
/* 写真・画像（本文 #arasowan の中だけに限定してフッターへの誤爆を防ぐ） */
#arasowan s img {
    width: 100%;
    height: auto;
}

#arasowan s1 img {
    width: 100%;
    height: auto;
    padding: 10px 0px 20px 0px;
}

/* 蜂の巣(7.jpg)・文化庁(2.jpg)を本文内だけで大きく表示 */
#arasowan s2 img {
    width: 100%;
    height: auto;
    padding: 10px 0px 20px 0px;
    display: block;
}

/* 製作工程(3.jpg)・見本(5.jpg)を本文内だけで綺麗に2枚横並びにする */
#arasowan s3 img {
    width: 48%;
    height: auto;
    padding: 10px 0px 15px 0px;
    display: inline-block;
    vertical-align: top;
}

#arasowan s4 img {
    width: 100%;
    height: auto;
    padding: 10px 0px 10px 0px;
}

/* 見出し・テキスト */
h1 {
    font-weight: 700;
    font-size: 160%;
    line-height: 120%;
    background-color: #f3f3f3;
    background-repeat: no-repeat;
    background-position: left 0px center;
    position: relative;
    text-shadow: none;
    color: #111;
    padding: 10px 0px 10px 20px;
    box-shadow: none;
}

h6 {
    font-weight: 300;
    font-size: 90%;
    line-height: 1em;
    color: #000;
    margin: 0;
    text-align: left;
    padding: 0px 0px 0px 20px;
}

bold {
    font-weight: 700;
    font-size: 120%;
    line-height: 3em;
    padding: 0px 0px 0px 20px;
    display: inline-block;
}

bold1 {
    font-weight: 700;
    font-size: 160%;
    line-height: 1em;
    padding: 0px 0px 0px 20px;
    display: inline-block;
}

#cs p1 {
    font-size: 100%;
    line-height: 1.5em;
}

#cs p2 {
    font-size: 100%;
    line-height: 1.3em;
}

#cs p3 {
    font-size: 120%;
    font-weight: bold;
}

/* リンク色設定 */
#hiage a,
#box2 a,
#box3 a,
#footnote ol a {
    color: #0060d1;
}

#cs u a {
    font-weight: 450;
    color: #AE0F30;
}

sup {
    vertical-align: super;
    font-size: 70%;
    color: #0060d1;
}

/* ページトップへ戻るボタン */
#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 77%;
    z-index: 100;
}

#page-top a {
    background: rgba(220, 220, 220, 0.6);
    text-decoration: none;
    color: #666;
    font-weight: 300;
    width: 50px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 25px;
}

#page-top a:hover {
    text-decoration: none;
    background: rgba(150, 150, 150, 0.4);
}

/* ===================================================
   Responsive (max-width: 2000px)
=================================================== */
@media only screen and (max-width: 2000px) {
    section {
        width: 61.8%;
        padding: 10px 0px 10px 0px;
    }

    .photo s1 img {
        width: 100%;
        padding: 100px 0px 20px 0px;
    }
}

/* ===================================================
   Responsive (max-width: 835px)
=================================================== */
@media only screen and (max-width: 835px) {
    section {
        width: 90%;
        padding: 10px 0px 10px 0px;
    }

    .name {
        padding: 20px 0px 10px 0px;
    }

    .photo s1 img {
        padding: 100px 0px 20px 0px;
    }

    h1 {
        font-size: 150%;
        padding: 15px 10px 15px 10px;
    }

    h6 {
        font-size: 80%;
    }

    bold1 {
        font-size: 120%;
        line-height: 2em;
        padding: 0px 10px 0px 10px;
    }

    bold {
        font-size: 110%;
        line-height: 2em;
        padding: 0px 10px 0px 10px;
    }

    #cs p1 {
        line-height: 2em;
    }

    #cs p2 {
        font-size: 80%;
        line-height: 1.4em;
        padding: 10px 0px 0px 0px;
    }
}

/* ===================================================
   Responsive (max-width: 480px)
=================================================== */
@media only screen and (max-width: 480px) {
    section {
        padding: 0px 0px 20px 0px;
    }

    .sp-br {
        display: block;
    }

    table {
        border-spacing: 0px;
        padding: 0px 0px 0px 20px;
    }

    .photo s1 img {
        padding: 100px 0px 20px 0px;
    }

    h1 {
        font-size: 100%;
        padding: 10px 0px 10px 10px;
    }

    h6 {
        font-size: 75%;
        padding: 0px 10px 10px 10px;
    }

    bold1 {
        font-size: 95%;
        line-height: 2em;
        padding: 0px 10px 0px 10px;
    }

    bold {
        font-size: 90%;
        line-height: 2em;
        padding: 0px 10px 0px 10px;
    }

    #cs p1 {
        font-size: 90%;
        line-height: 1.8em;
    }

    #cs p2 {
        font-size: 70%;
        line-height: 1.4em;
    }

    #cs u a {
        font-size: 90%;
        color: #F00;
    }

    #space {
        min-height: 20px;
    }

    /* 脚注セクションのスマホ最適化（余白と70%サイズ） */
    #footnote {
        padding: 0px 15px 20px 15px;
    }

    #footnote bold {
        font-size: 85%;
        padding: 0px 0px 0px 5px;
    }

    #footnote ol {
        font-size: 70%;
        line-height: 1.5;
        padding: 5px 10px 0px 25px;
    }
}