@charset "UTF-8";

/* --------------------------------
 *  全ページ
 * -------------------------------- */
html {
    font-size: 62.5%;   /* ベースの文字サイズ 10px相当 */
}
body {
    margin: 0;
    color: #333;
    font-size: 1.5rem;   /* デフォルト文字サイズ 15px */
    font-family: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;;
    background-color:gainsboro;   /* 背景色の設定         */
}
html *, *::before, *::after {
    box-sizing: border-box;        /* ボックスモデルの設定変更       */
}
a:link, a:visited, a:hover, a:active {
    color: #d03c56;
    text-decoration: none;
}
p {
    line-height: 2.5rem;         /* デフォルトの行間スペース調整          */
}
/* --------------------------------
 *  枠組み
 * -------------------------------- */
.wrapper {
    max-width: 1960px;
    margin: 30px auto 40px;
}
.main {
    display: block;
    float:left;
    width: calc(100% - 500px);   /* 100% - sidemenu - 25pxに設定 */
    margin-top: 0;
    margin-left: 60px;
    margin-right: 0;
}
.sidemenu {
    display: block;
    float: right;
    width: 275px;
    height: 1200px;           /* サイドメニューの高さ */    
    margin-right: 60px;
    margin-bottom: 35px;    
}
.footer {
    width: 100%;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.drawer {
    display: none;
}
/* --------------------------------
 *  文中の数式
 * -------------------------------- */
 .letter-flat {
    padding: 0 10px 5px 10px;
    vertical-align:middle;        /* 文中の数式 中央揃え                  */
}
.letter-frac {
    padding: 7px;                 /* 文中の数式（分数）の上下左右を空ける          */
    vertical-align: middle;       /* 文中の数式 中央揃え                  */
}
.letter-num {
    padding-bottom: 5px;
    vertical-align: middle;       /* 文中の数式 中央揃え                  */    
}
/* --------------------------------
 *  タイトルロゴ
 * -------------------------------- */
.header {
    width: 100%;
    padding: 24px 0 0 0;
    background: url('../img/bg-header.gif') repeat-x;
    box-shadow: 0 0 10px 1px #e3e3e3;
    background-color: white;
}
.logo a {
    display: block;
    width: 100%;
    height: 100%;    
    text-align: center;
    color: #000077;
    font-size: 3.5rem;
}
/* --------------------------------
 *  グローバルナビ
 * -------------------------------- */
.gnavi_warpper {
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    background-color: #191970;
}
.gnavi_warpper .gnavi_list{
    display: inline-block;
    margin: 0 10px;
}
.gnavi_warpper .gnavi_list a
{
    display: inline-block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 1px;
    transition: 0.15s;
}
.gnavi_warpper .gnavi_list.active a,
.gnavi_warpper .gnavi_list a:hover {
    background-color:  #fff;
    color: #000077;
}
/* --------------------------------
 *  breadcrumb
 * -------------------------------- */
.breadcrumb {
    font-size: 1.65rem;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* --------------------------------
 *  フッター
 * -------------------------------- */
.footer {
    width: 100%;
    padding: 20px 0 30px;
    background: #2d3d54 url('../img/bg-footer.gif');
    color: #fff;
}
.horizontal-list {
    width: 85%;
    margin: 0 auto;
    text-align: right;
    font-size: 0;
}
.horizontal-list .horizontal-item {
    display: inline-block;
    padding: 0 15px;
    letter-spacing: 1px;
}
.horizontal-list .horizontal-item + .horizontal-item {
    border-left: 1px solid #bbb;
}
.horizontal-list .horizontal-item a {
    border-bottom: 1px dashed #777;
    color: #bbb;
    font-size: 1.1rem;
    transition: color 0.15s;
}
.horizontal-list .horizontal-item a:hover {
    color: #ddd;
}
.copyright {
    font-size: 1.3rem;
    margin-top: 30px;
    text-align: center;
    letter-spacing: 1px;
}
/* --------------------------------
 *  科目リスト
 *  いずれ画像にしたいが、通常リンクで暫定対応
 * -------------------------------- */
.li-subject a {
    line-height: 2.5rem; 
}
/* --------------------------------
 *  h2-category見出し
 *  index.html の「物理学」など
 * -------------------------------- */
.h2-category {
    color: #000077;                      /* h2見出しの文字色設定       */
    font-size: 22px;                       /* h2見出しの文字サイズ設定   */
    border-bottom: 2px solid #000077;    /* h2見出し下の線   */
    margin: 20px 0 20px 0;                 /* h2見出しのマージン   top-right-bottom-left */
    padding: 5px 5px 5px 5px;              /* h2見出しのパディング top-right-bottom-left */
    text-align: center;                    /* h2見出しの中央揃え                         */
}
/* --------------------------------
 *  その他の見出し
 * -------------------------------- */
.h2-subject {
    color: #000077;                      /* h2見出しの文字色設定       */
    font-size: 2.5rem;                       /* h2見出しの文字サイズ設定   */
    padding-bottom: 20px;                  /* h2見出しのパディング       */
    padding-top: 20px;                     /* h2見出しのパディング       */   
}
.h3-subject{
    color: #333;                      /* h2見出しの文字色設定       */
    font-size: 1.8rem;                       /* h2見出しの文字サイズ設定   */
    padding-bottom: 1px;                  /* h2見出しのパディング       */
    padding-left: 30px;                     /* h2見出しのパディング       */       
}
.h3-exp {
    font-size: 1.7rem;
    padding-top: 20px;
    margin-right: 80px;
    border-bottom: double 5px;
    border-color:#0000cd;
}
/* --------------------------------
 *  contents.html
 * -------------------------------- */
.contents-item {
    display: flex;
    align-items:center;            /* 上下は中央揃え */
    flex-direction: row;
    border-bottom:1px dashed #bec2c7;
    padding: 5px 0 0 40px;
}
.contents-title {
    margin-right: 8px;
    flex: 0 0 150px;        /* 問題名の最大幅に合わせて調整 */
    text-align: right;
}
.contents-star{
    margin-right: 20px;
    flex: 0 0 50px;    
}
.contents-text{
    flex:1 1 auto;
}
/* --------------------------------
 *  qxxxx.html
 * -------------------------------- */
.slide-box-eq {                   /* 数式のスライドボックス表示 */
    overflow-x: scroll;
    height: auto;
    max-width: 90%;
    margin: 8px;
    padding: 10px 5px;
    border: 1px solid #bbb;
}
.slide-box-eq img {
    margin-left: 10px;
}
.para-set1 {
    padding-left: 10px;     /* パラグラフ（インデント） */
}
p {
    font-size: 1.6rem;
    line-height: 3.8rem;               /* 行間スペースを広めに取る        */
}
.yellow-marker {
   background-color: #e2f7b7;
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 3px;
   border-radius: 5px;
}
/* ---------------------
 * question
 * -------------------- */
.question-box {
    position: relative;
    margin: 3.0em 0;
    padding: 0.5em 1em;
    border: solid 3px #000077;
    background-color: #f8f8f8;
    border-radius: 0 20px 20px 20px;
}
.question-box .question-box-title {
    position: absolute;
    display: inline-block;
    top: -3.5rem;          /* 同じ値 */
    left: -3px;
    padding: 0 15px;
    height: 3.4rem;         /* 同じ値 */
    line-height: 3.5rem;    /* 同じ値 */
    font-size: 2.0rem;
    background: #000077;
    color: #ffffff;
    font-weight: bold;
    border-radius: 6px 6px 0 0;
}
.question-item {
    display: flex;
    overflow-x:hidden;
    padding: 0;
    margin: 0 0 0 40px;
    align-items: center;     
}
.question-num {
    flex-basis: 45px; /* flexアイテムの幅を数値で指定 */
    align-items:center;
    padding: 5px 0;
}
.question-eq1 {
    flex-basis: 150px; /* flexアイテムの幅を数値で指定 */
    align-items:center;
    padding: 5px 0;
}
/* ---------------------
 * point
 * -------------------- */
.Point {
    padding-right: 1.0rem;
    color: #000077;
}
.p-point {
    padding-left: 1.6rem;
}
.qp-border {
    width: 100%;
    font-size: 0;
    border-bottom: 2px dotted #000077;
    margin: 20px 0 20px 0;
    padding: 5px;
}
.point-text {
    margin: 5px 0 0 15px;  
}
.point-ul {
    padding: 10px 0 0 0;
    overflow-x:hidden;
}
.point-ul li {
    padding: 0;
    max-width: 500px;
    position: relative;
    list-style-type: none!important;/*ポチ消す*/
    padding: 0.5em 0.5em 0.5em 0.5em;
    margin-bottom: 5px;
    line-height: 1.5;
    background-color: #dbebf8;
    vertical-align: middle;
    color: #505050;
    border-radius: 15px 15px 15px 15px;
}
.point-ul li:before{ 
    display:inline-block; 
    vertical-align: middle;
    /*以下白丸つくる*/
    content:'';
    width:1em;
    height: 1em;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 8px;
}
/* ---------------------
 * explanation
 * -------------------- */
.exp-box {
    position: relative;
    margin: 5.0em 0;
    padding: 0.5em 1em;
    border: solid 3px #000077;
    background-color: #f8f8f8;
    border-radius: 0 20px 20px 20px;
}
.exp-box .exp-box-title {
    position: absolute;
    display: inline-block;
    top: -3.5rem;          /* 同じ値 */
    left: -3px;
    padding: 0 15px;
    height: 3.4rem;         /* 同じ値-1px */
    line-height: 3.5rem;    /* 同じ値 */
    font-size: 2.0rem;
    background: #000077;
    color: #ffffff;
    font-weight: bold;
    border-radius: 6px 6px 0 0;
}
.exp-text {
    margin: 10px 0 0 20px;
}
/* --------------------------------
 * sidemenu.html
 * -------------------------------- */
.current {
    margin-bottom: 30px;
    list-style-type: none;
    counter-reset: current;
    height: 350px;
    overflow-y: scroll;
}
.current .current-item {
    margin-top: 15px;
}
.current .current-item a {
    display: block;
    font-size: 0;
    transition: opacity 0.15s;
}
.current .current-item a:hover {
    opacity: 0.8;
}
.current .image {
    width: 55px;
    height: 55px;
    margin-right: 15px;
}
.current .text {
    display: inline-block;
    width: 182px;
    color: #000;
    vertical-align: top;
    font-size: 1.2rem;
    line-height: 1.5;
}
.search-box {
    margin-bottom: 35px;
    padding: 15px;
    background-color: #ccc;
    font-size: 0;
}
.search-box > * {
    font-size: 1.2rem;
}
.search-box .search-input {
    width: 205px;
    height: 26px;
    padding: 0 10px;
    border: none;
}
.search-box .search-button {
    width: 40px;
    height: 26px;
    border: none;
    background-color: #d03c56;
    color: #fff;
    cursor: pointer;
}
.search-box .text {
    margin-top: 12px;
}
.documents {
    margin: 10px 10px 30px;
}
.documents,
.documents ul {
    list-style-type: none;
}
.documents > li .title {
    margin: 15px 0;
    padding-left: 8px;
    border-left: 5px solid #d03c56;
    font-size: 1.4rem;
    line-height: 1.2;
}
.documents > li + li {
    margin-top: 25px;
}
.documents > li ul {
    margin: 15px;
}
.documents > li ul > li {
    margin-bottom: 15px;
    padding-left: 10px;
}
.documents a:hover {
    text-decoration: underline;
}
/* ---------------------
 * drawer.html
 * -------------------- */
 /* チェックボックスは非表示に */
.drawer-hidden {
    display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
    display: flex;
    height: 60px;
    width: 60px;
    right: 10px;
    top: -8px;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #333;
    transition: 0.5s;
    position: absolute;
}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
    bottom: 8px;
}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
    top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
    background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
}
/* メニューのデザイン*/
.drawer-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/* メニューを画面の外に飛ばす */
    z-index: 99;
    background: #fff;
    transition: .5s;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
    left: 0;/* メニューを画面に入れる */
}
/* --------------------------------
 *  スマホ向け設定
 * -------------------------------- */
@media (max-width: 767px){
    /* --------------------------------
    *  全ページ
    * -------------------------------- */ 
    p {
        line-height: 2.3rem;         /* 行間スペース調整 2.5-> 2.3   */
    }    
    /* --------------------------------
    *  枠組み
    * -------------------------------- */       
    .wrapper {
        max-width: 1160px;
        margin: 0 8px;
    }
    .main {
        display: block;
        width: 100%;
        margin: 0;
        padding: 65px 0 0 0;
    }
    /* --------------------------------
    *  タイトルロゴ
    * -------------------------------- */
    .header {
        padding: 12px 0 0 0;
        position: fixed;
    }
    .logo a {
        font-size: 2.5rem;
        text-align: left;        
        padding: 0 0 0 35px;
    }
    /* --------------------------------
    *  グローバルナビ
    * -------------------------------- */    
    .gnavi_warpper {
        position: 100%;
        width: 100%;
        height: 20px;    
    }    
    .gnavi_warpper .gnavi_list {
        display: block;        
    }
    .gnavi_warpper .gnavi_list a {
        display: none;
    }  
    /* --------------------------------
    *  drawer.html
    * -------------------------------- */    
    .drawer {
        display: flex;
    }          
    /* --------------------------------
    *  contents.html
    * -------------------------------- */
    .contents-item {
        display: block;
        padding: 5px 0 0 40px;
    }
    .contents-title {
        margin-right: 0;
        width: 100%;
        text-align: left;
    }
    .contents-star {
        margin-right: 0;
        width: 100%;  
    }
    .contents-text {
        margin-right: 0;
        width: 100%;
    }
    /* --------------------------------
    *  sidemenu.html
    * -------------------------------- */
    .sidemenu {
        display: none;
    }
}
/* --------------------------------
 *  デバッグ用
 * -------------------------------- */