@charset "UTF-8";




/*円*/


/*円の中の文字列が「１行」*/

/*枠線１ピクセル*/
.circle1_1px{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
text-align:center;
line-height: 80px;
border: solid 1px #000 !important;
font-weight: 600;		
}

/*枠線２ピクセル*/
.circle1_2px{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
text-align:center;
line-height: 80px;
border: solid 2px #000 !important;
font-weight: 600;		
}


/*円の中の文字列が「２行以上」*/

/*枠線１ピクセル*/
.circle2_1px {	
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border: solid 1px #000 !important;	
}

.circle2_1px span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :80px;
text-align:center;
font-weight: 600;	
}


/*枠線２ピクセル*/
.circle2_2px {	
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border: solid 2px #000 !important;	
}

.circle2_2px span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :80px;
text-align:center;
font-weight: 600;	
}


/*ふと長い矢印*/

/*右向き*/

.boldright{
    position: relative;
}
.boldright::before{
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: 10px;
    width: 30px;
    height: 16px;
    background: #666;
}
.boldright::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 40px;
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent transparent transparent #666;
}


/*右向き*/

.boldleft{
    position: relative;
}
.boldleft::before{
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: 40px;
    width: 50px;
    height: 16px;
    background: #666;
}
.boldleft::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent #666 transparent transparent;
}


/*上向き*/

.boldtop{
    position: relative;
}
.boldtop::before{
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    left: 12px;
    width: 16px;
    height: 50px;
    background: #666;
}
.boldtop::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: transparent transparent #666 transparent;
}


/*下向き*/

.boldbottom{
    position: relative;
}
.boldbottom::before{
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 12px;
    width: 16px;
    height: 50px;
    background: #666;
}
.boldbottom::after{
    content: "";
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    width: 0;
    height: 0;
    border: 20px solid;
    border-color: #666 transparent transparent transparent;
}


/*テーブルを可変*/

/*768以上表示*/
.srn_big{ display: none;}
@media screen and (min-width:768px) {.srn_big{display: block;}}


/*768未満表示*/
.srn_sml{ display: none;}
@media screen and (max-width:767px) {.srn_sml{display: block;}}


/*768未満の文字サイズ*/
@media screen and (max-width:767px) {.srn_sml td {font-size:9.5px !important ;}}
@media screen and (max-width:375px) {.srn_sml td {font-size:9.0px !important ;}}
@media screen and (max-width:320px) {.srn_sml td {font-size:8.0px !important ;}}

@media screen and (max-width:767px) {.srn_sml p {font-size:9.5px !important ;}}
@media screen and (max-width:375px) {.srn_sml p {font-size:9.0px !important ;}}
@media screen and (max-width:320px) {.srn_sml p {font-size:8.0px !important ;}}



/*画面サイズの調整*/


/*スタンダード*/
.ar_scale{width: 61%;}
@media screen and (max-width:1024px) {.ar_scale{width: 61%;}}
@media screen and (max-width:1010px) {.ar_scale{width: 63%;}}
@media screen and (max-width:990px) {.ar_scale{width: 65%;}}
@media screen and (max-width:970px) {.ar_scale{width: 67%;}}
@media screen and (max-width:950px) {.ar_scale{width: 70%;}}
@media screen and (max-width:930px) {.ar_scale{width: 72%;}}
@media screen and (max-width:910px) {.ar_scale{width: 75%;}}
@media screen and (max-width:890px) {.ar_scale{width: 78%;}}
@media screen and (max-width:870px) {.ar_scale{width: 81%;}}
@media screen and (max-width:850px) {.ar_scale{width: 84%;}}
@media screen and (max-width:830px) {.ar_scale{width: 88%;}}
@media screen and (max-width:810px) {.ar_scale{width: 92%;}}
@media screen and (max-width:790px) {.ar_scale{width: 96%;}}
@media screen and (max-width:768px) {.ar_scale{width: 100%;}}
@media screen and (max-width:750px) {.ar_scale{width: 55%;}}
@media screen and (max-width:730px) {.ar_scale{width: 56%;}}
@media screen and (max-width:710px) {.ar_scale{width: 58%;}}
@media screen and (max-width:690px) {.ar_scale{width: 60%;}}
@media screen and (max-width:670px) {.ar_scale{width: 61%;}}
@media screen and (max-width:650px) {.ar_scale{width: 63%;}}
@media screen and (max-width:630px) {.ar_scale{width: 65%;}}
@media screen and (max-width:610px) {.ar_scale{width: 67%;}}
@media screen and (max-width:590px) {.ar_scale{width: 70%;}}
@media screen and (max-width:570px) {.ar_scale{width: 72%;}}
@media screen and (max-width:550px) {.ar_scale{width: 75%;}}
@media screen and (max-width:530px) {.ar_scale{width: 78%;}}
@media screen and (max-width:510px) {.ar_scale{width: 81%;}}
@media screen and (max-width:490px) {.ar_scale{width: 84%;}}
@media screen and (max-width:470px) {.ar_scale{width: 88%;}}
@media screen and (max-width:450px) {.ar_scale{width: 92%;}}
@media screen and (max-width:430px) {.ar_scale{width: 96%;}}
@media screen and (max-width:414.5px) {.ar_scale{width: 100%;}}


.ar_scale td{ border:none !important; vertical-align: middle !important; padding: 0px !important;}


/*スマホ→タブレット100%タイプ*/
.ar_scale_typ2{width: 61%;}
@media screen and (max-width:1024px) {.ar_scale_typ2{width: 61%;}}
@media screen and (max-width:1010px) {.ar_scale_typ2{width: 63%;}}
@media screen and (max-width:990px) {.ar_scale_typ2{width: 65%;}}
@media screen and (max-width:970px) {.ar_scale_typ2{width: 67%;}}
@media screen and (max-width:950px) {.ar_scale_typ2{width: 70%;}}
@media screen and (max-width:930px) {.ar_scale_typ2{width: 72%;}}
@media screen and (max-width:910px) {.ar_scale_typ2{width: 75%;}}
@media screen and (max-width:890px) {.ar_scale_typ2{width: 78%;}}
@media screen and (max-width:870px) {.ar_scale_typ2{width: 81%;}}
@media screen and (max-width:850px) {.ar_scale_typ2{width: 84%;}}
@media screen and (max-width:830px) {.ar_scale_typ2{width: 88%;}}
@media screen and (max-width:810px) {.ar_scale_typ2{width: 92%;}}
@media screen and (max-width:790px) {.ar_scale_typ2{width: 96%;}}
@media screen and (max-width:768px) {.ar_scale_typ2{width: 100%;}}

.ar_scale_typ2 td{ border:none !important; vertical-align: middle !important; padding: 0px !important;}


/*スマホ→タブレット100%タイプ*/
.ar_ar_scale2{width: 61%;}
@media screen and (max-width:1024px) {.ar_ar_scale2{width: 61%;}}
@media screen and (max-width:1010px) {.ar_ar_scale2{width: 63%;}}
@media screen and (max-width:990px) {.ar_ar_scale2{width: 65%;}}
@media screen and (max-width:970px) {.ar_ar_scale2{width: 67%;}}
@media screen and (max-width:950px) {.ar_ar_scale2{width: 70%;}}
@media screen and (max-width:930px) {.ar_ar_scale2{width: 72%;}}
@media screen and (max-width:910px) {.ar_ar_scale2{width: 75%;}}
@media screen and (max-width:890px) {.ar_ar_scale2{width: 78%;}}
@media screen and (max-width:870px) {.ar_ar_scale2{width: 81%;}}
@media screen and (max-width:850px) {.ar_ar_scale2{width: 84%;}}
@media screen and (max-width:830px) {.ar_ar_scale2{width: 88%;}}
@media screen and (max-width:810px) {.ar_ar_scale2{width: 92%;}}
@media screen and (max-width:790px) {.ar_ar_scale2{width: 96%;}}
@media screen and (max-width:768px) {.ar_ar_scale2{width: 100%;}}

.ar_ar_scale2 td{ border:none !important; vertical-align: middle !important; padding: 0px !important;}



/*スタンダード パソコン→タブレットは100%タイプ*/
.ar_scale3{width: 100%;}
@media screen and (max-width:768px) {.ar_scale3{width: 100%;}}
@media screen and (max-width:750px) {.ar_scale3{width: 55%;}}
@media screen and (max-width:730px) {.ar_scale3{width: 56%;}}
@media screen and (max-width:710px) {.ar_scale3{width: 58%;}}
@media screen and (max-width:690px) {.ar_scale3{width: 60%;}}
@media screen and (max-width:670px) {.ar_scale3{width: 61%;}}
@media screen and (max-width:650px) {.ar_scale3{width: 63%;}}
@media screen and (max-width:630px) {.ar_scale3{width: 65%;}}
@media screen and (max-width:610px) {.ar_scale3{width: 67%;}}
@media screen and (max-width:590px) {.ar_scale3{width: 70%;}}
@media screen and (max-width:570px) {.ar_scale3{width: 72%;}}
@media screen and (max-width:550px) {.ar_scale3{width: 75%;}}
@media screen and (max-width:530px) {.ar_scale3{width: 78%;}}
@media screen and (max-width:510px) {.ar_scale3{width: 81%;}}
@media screen and (max-width:490px) {.ar_scale3{width: 84%;}}
@media screen and (max-width:470px) {.ar_scale3{width: 88%;}}
@media screen and (max-width:450px) {.ar_scale3{width: 92%;}}
@media screen and (max-width:430px) {.ar_scale3{width: 96%;}}
@media screen and (max-width:414.5px) {.ar_scale3{width: 100%;}}


.ar_scale3 td{ border:none !important; vertical-align: middle !important; padding: 0px !important;}



/*スタンダード 全て100%タイプ*/
.ar_scale4{width: 100%;}
@media screen and (max-width:768px) {.ar_scale4{width: 100%;}}


.ar_scale4 td{ border:none !important; vertical-align: middle !important; padding: 0px !important;}


/*スタンダード 全て100%タイプ　ボーダー、パディング指定なし*/
.ar_scale5{width: 100%;}
@media screen and (max-width:768px) {.ar_scale5{width: 100%;}}






/* 縦横比一定の正方形 */
.sikaku {
  width: 50% ;
}
.sikaku2 {
  width : 100% ;
  padding-top : 100% ;
  background-color: #29d632;
}

.sikakukara {
  width: 50% ;
}
.sikakukara2 {
  width : 100% ;
  padding-top : 100% ;
  background-color: none;
}




/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:414px) {
    .sma{
        display: block;
    }
}

/*PCでは無効（改行しない）*/
.tab{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .tab{
        display: block;
    }
}

/*tab PC適用*/
.tabpc{
    display: none;
}

/*tab pcでは有効*/
@media screen and (min-width:415px) {
    .tabpc{
        display: block;
    }
}


/*テーブルを可変*/

/*線なし、パディングなしタイプ*/
.tb_kahen{width: 65%;}
@media screen and (min-width: 1024px) {.tb_kahen{width: 65%;}}
@media screen and (max-width: 1023px) {.tb_kahen{width: 85%;}}
@media screen and (max-width: 768.5px) {.tb_kahen{width: 100%;}}
@media screen and (max-width: 428.5px) {.tb_kahen{width: 100%;}}
@media screen and (max-width: 390.5px) {.tb_kahen{width: 100%;}}
@media screen and (max-width: 320.5px) {.tb_kahen{width: 100%;}}

.tb_kahen td{border: none  !important; padding: 2px!important; }


.p_kahen{margin-left:1em;}
@media screen and (min-width: 1024px) {.p_kahen{margin-left: 1em;}}
@media screen and (max-width: 1023px) {.p_kahen{margin-left: 3em;}}
@media screen and (max-width: 768.5px) {.p_kahen{margin-left: 1em;}}
@media screen and (max-width: 428.5px) {.p_kahen{margin-left: 1em;}}
@media screen and (max-width: 390.5px) {.p_kahen{margin-left: 1em;}}
@media screen and (max-width: 320.5px) {.p_kahen{margin-left: 0em;}}


/*線なし、パディングなしタイプ*/
.tb_kahen2{width: 65%;}
@media screen and (min-width: 1024px) {.tb_kahen2{width: 65%;}}
@media screen and (max-width: 1023px) {.tb_kahen2{width: 85%;}}
@media screen and (max-width: 768.5px) {.tb_kahen2{width: 100%;}}
@media screen and (max-width: 428.5px) {.tb_kahen2{width: 100%;}}
@media screen and (max-width: 390.5px) {.tb_kahen2{width: 100%;}}
@media screen and (max-width: 320.5px) {.tb_kahen2{width: 100%;}}
.tb_kahen2 td{padding: 5px!important; } 


/*スマホとパソコンの横サイズ同じ*/
.tb_kahen3{width: 45%;}
@media screen and (min-width: 1024px) {.tb_kahen3{width: 45%;}}
@media screen and (min-width: 429px) and (max-width: 1023px) {.tb_kahen3{width: 60%;}}
@media screen and (max-width: 428.5px) {.tb_kahen3{width: 100%;}}
.tb_kahen3 td{padding: 2px!important; }
.tb_kahen3b td{border: none  !important; padding: 2px; }

/*囲み文字の指定*/

/*背景色あり(枠線あり)*/
.kakomimasu{display: inline-block; border: solid 1px #000; padding: 0px 4px; background-color: #faeef4;}
/*背景色なし*/
.kakomimasu2{display: inline-block; border: solid 1px #000; padding: 0px 4px;}

/*背景色あり(枠線なし)*/
.kakomimasu3{display: inline-block; border: none; padding: 0px 4px; background-color: #faeef4;}


/*（例とタイトルが）濃いピンク背景*/

.kakomimasu4{display: inline-block; border: none; padding: 6px 4px; background-color: #efcbe4; text-indent: -3em; padding-left: 3em; line-height: 1.2em; font-weight: bold;}


/*図の設定*/

/*記号や線があるtd*/
td .kigou {
	text-align: center;
	vertical-align: top ;
	overflow: hidden;
	line-height: 12px ;
	padding: 0 0 0 0 ;
	margin: 0 0 0 0  ;
	height: 22px ;
}

td .kigou img {
	vertical-align: top ;
	overflow: hidden ;
	max-width:100% ;
	height:auto ;
    margin: 0 0 0 0  ;
	padding: 0 0 0 0  ;
}

td .kigou p {
	vertical-align: middle ;
	line-height: 12px ;
	padding: 0px ;
	margin: 0px ;
	font-size: 12px ;
}




/*分数式のテーブル可変*/

.3kahen{
 width: 100px;	
}

/*@media screen and (min-width: 415px) {.3kahen td {width: 70%; background-color: aqua; margin-top: 100px !important;  }}
@media screen and (min-width: 769px) {.3kahen td {width: 50%; background-color: aqua; margin-top: 100px !important; }}*/



/*社労士用 小タイトル１*/

.s-1-sr {
  color:black;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  text-indent: 0;
  background-color: #faeef4 !important;
  border-radius: 5px;
  width: 100%;
  margin: 25px 0px 30px 0px;
  font-size: 33px;
}

@media screen and (max-width: 768.5px) {
  .s-1-sr {
    color:black;
    font-weight: bold;
    padding: 0.65062vw 0.65062vw 0.65062vw 1.95185vw;
    text-indent: 0;
    background-color: #faeef4 !important;
    border-radius: 0.65062vw;
    width: 100%;
    margin: 3.25309vw 0px 1.30124vw 0px;
    font-size: 3.7vw;
  }
}

@media screen and (max-width: 768.5px) {.s-1-sr {font-size: 3.7vw;}}
@media screen and (max-width: 428.5px) {.s-1-sr {font-size: 4.0vw;}}
@media screen and (max-width: 390.5px) {.s-1-sr {font-size: 4.5vw;}}
@media screen and (max-width: 320.5px) {.s-1-sr {font-size: 5.0vw;}}


/*社労士用 小タイトル2*/

.s-2-sr {
  color:black;
  font-weight: bold;
  width: 100%;
  font-size: 23px;
}

@media screen and (max-width: 768.5px) {
  .s-2-sr {
    color:black;
    font-weight: bold;
    text-indent: 0;
    width: 100%;
    font-size: 2.8vw;
  }
}

@media screen and (max-width: 768.5px) {.s-2-sr {font-size: 2.6vw; text-indent: -1.2em; padding-left: 1.2em; line-height: 1.2em;}}
@media screen and (max-width: 428.5px) {.s-2-sr {font-size: 3.8vw; text-indent: -1.2em; padding-left: 1.2em; line-height: 1.2em;}}
@media screen and (max-width: 390.5px) {.s-2-sr {font-size: 4.6vw; text-indent: -1.2em; padding-left: 1.2em; line-height: 1.2em;}}
@media screen and (max-width: 320.5px) {.s-2-sr {font-size: 4.6vw; text-indent: -1.2em; padding-left: 1.2em; line-height: 1.2em;}}


/*重要度*/

@media screen and (min-width: 1024px) {
.jyd{ font-size: 15px; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 15px;  }
.child-left-sr { position:absolute; width: 85%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 15%; right:0; }
}

@media screen and (max-width: 1023px) {
.jyd{font-size: 1.5vw; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 15px;  }
.child-left-sr { position:absolute; width: 88%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 12%; right:0; }
}

@media screen and (max-width: 768.5px) {
.jyd{font-size: 2.0vw; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 25px;  }
.child-left-sr { position:absolute; width: 85%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 15%; right:0; }
}

@media screen and (max-width: 428.5px) {
.jyd{font-size: 2.7vw; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 15px;  }
.child-left-sr { position:absolute; width: 78%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 22%; right:0; }	
}

@media screen and (max-width: 390.5px) {
.jyd{font-size: 2.7vw; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 15px;  }
.child-left-sr { position:absolute; width: 78%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 22%; right:0; }
}

@media screen and (max-width: 320.5px) {
.jyd{ font-size: 3.5vw; border: 1px solid; padding: 1px 5px 1px 5px; display: inline-block; font-weight: 500; letter-spacing: 0em; text-align: center; margin: 0px; }
.parent-sr { position:relative; margin-top: 10px;  }
.child-left-sr { position:absolute; width: 73%; padding-right: 10px; }
.child-right-sr { position:absolute; width: 27%;right:0; }
}



/*Outline*/

.outline{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.outline{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.outline{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.outline{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.outline{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.outline{width: 100px;}}
@media screen and (max-width: 390.5px) {.outline{width: 100px;}}
@media screen and (max-width: 320.5px) {.outline{width: 100px;}}


/*ちょっとアドバイス*/

.advice{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.advice{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.advice{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.advice{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.advice{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.advice{width: 100px;}}
@media screen and (max-width: 390.5px) {.advice{width: 100px;}}
@media screen and (max-width: 320.5px) {.advice{width: 100px;}}


/*ここで具体例*/

.example{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.example{width: 80px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.example{width: 70px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.example{width: 70px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.example{width: 70px; margin-top: 20px;}}
@media screen and (max-width: 428.5px) {.example{width: 50px;}}
@media screen and (max-width: 390.5px) {.example{width: 50px;}}
@media screen and (max-width: 320.5px) {.example{width: 50px;}}




/*ADCANCE*/

.advance{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.advance{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.advance{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.advance{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.advance{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.advance{width: 100px;}}
@media screen and (max-width: 390.5px) {.advance{width: 100px;}}
@media screen and (max-width: 320.5px) {.advance{width: 100px;}}


/*判例チェック*/

.hanrei{padding: 0px; margin: 0px !important; width: 100px;}
@media screen and (min-width: 1024px) {.hanrei{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.hanrei{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.hanrei{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.hanrei{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.hanrei{width: 100px;}}
@media screen and (max-width: 390.5px) {.hanrei{width: 100px;}}
@media screen and (max-width: 320.5px) {.hanrei{width: 100px;}}


/*条文*/

.article{padding: 0px; margin-left: 8px; width: 50px;}
@media screen and (min-width: 1024px) {.article{width: 70px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.article{width: 60px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.article{width: 60px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.article{width: 60px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.article{width: 50px;}}
@media screen and (max-width: 390.5px) {.article{width: 50px;}}
@media screen and (max-width: 320.5px) {.article{width: 50px;}}


/*参考条文*/

.sanko{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.sanko{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.sanko{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.sanko{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.sanko{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.sanko{width: 100px;}}
@media screen and (max-width: 390.5px) {.sanko{width: 100px;}}
@media screen and (max-width: 320.5px) {.sanko{width: 100px;}}


/*ここをチェック*/

.check{padding: 0px; margin-left: 8px; width: 100px;}
@media screen and (min-width: 1024px) {.check{width: 140px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.check{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 1023px) {.check{width: 120px; margin-top: 20px;}}
@media screen and (max-width: 768.5px) {.check{width: 120px; margin-top: 10px;}}
@media screen and (max-width: 428.5px) {.check{width: 100px;}}
@media screen and (max-width: 390.5px) {.check{width: 100px;}}
@media screen and (max-width: 320.5px) {.check{width: 100px;}}


/*改正*/

.kaisei{padding: 0px; margin-left: 8px; width: 60px;}
@media screen and (min-width: 1024px) {.kaisei{width: 60px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 1023px) {.kaisei{width: 60px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 800px) {.kaisei{width: 55px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 768.5px) {.kaisei{width: 65px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 700.5px) {.kaisei{width: 58px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 628.5px) {.kaisei{width: 50px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 528.5px) {.kaisei{width: 40px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 428.5px) {.kaisei{width: 50px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 390.5px) {.kaisei{width: 55px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 320.5px) {.kaisei{width: 50px; padding: 0px !important; margin: 0px !important;}}



/*新設*/

.shinsetsu{padding: 0px; margin-left: 8px; width: 60px;}
@media screen and (min-width: 1024px) {.shinsetsu{width: 60px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 1023px) {.shinsetsu{width: 60px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 800px) {.shinsetsu{width: 55px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 768.5px) {.shinsetsu{width: 65px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 700.5px) {.shinsetsu{width: 58px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 628.5px) {.shinsetsu{width: 50px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 528.5px) {.shinsetsu{width: 40px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 428.5px) {.shinsetsu{width: 50px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 390.5px) {.shinsetsu{width: 55px; padding: 0px !important; margin: 0px !important;}}
@media screen and (max-width: 320.5px) {.shinsetsu{width: 50px; padding: 0px !important; margin: 0px !important;}}




/*旧設定*/
.s_pc{ display: none !important;}
.s_pc835{ display: none !important;}
.s_pc800{ display: none !important;}
.s_tb3_992{ display: none !important;}
.s_tb3_991{ display: none !important;}
.s_tb3{ display: none !important;}
.s_tb2{ display: none !important;}
.s_tb1{ display: none !important;}
.s_xs3{ display: none !important;}
.s_xs2{ display: none !important;}
.s_xs{ display: none !important;}


/*1025以上表示*/
@media screen and (min-width: 1025px) { .s_pc{display: block !important;}}
/*835以上表示*/
@media screen and (min-width: 835px) {.s_pc835{display: block !important;}}
/*800以上表示*/
@media screen and (min-width: 800px) {.s_pc800{display: block !important;}}
/*992〜1024表示*/
@media screen and (min-width: 992px) and (max-width: 1024px) {.s_tb3_992{display: block !important;}}
/*835〜991表示*/
@media screen and (min-width: 835px) and (max-width: 991px) {.s_tb3_991{display: block !important;}}
/*835〜1024表示*/
@media screen and  (min-width: 835px) and (max-width: 1024px)  {.s_tb3{display: block !important;}}
/*769〜799表示*/
@media screen and (min-width: 769px) and (max-width: 799px) {.s_tb799{display: block !important;}}
/*769〜834表示*/
@media screen and (min-width: 769px) and (max-width: 834px) {.s_tb2{display: block !important;}}
/*721〜768表示*/
@media screen and (min-width: 721px) and (max-width: 768px) {.s_tb1{display: block !important;}}
/*414〜720表示*/
@media screen and (min-width: 401px) and (max-width: 720px) {.s_xs3{display: block !important;}}
/*321〜413表示*/
@media screen and (min-width: 321px) and (max-width: 400px) {.s_xs2{display: block !important;}}
/*320以下で表示*/
@media screen and (max-width:320px) {.s_xs{display: block !important;}}
/*1024以下で表示*/
@media screen and (max-width:1024px) {.s_pc_no{display: block !important;}}






/*新設定*/
.ns_pc{ display: none !important;}
.ns_tb4{ display: none !important;}
.ns_tb3{ display: none !important;}
.ns_tb2{ display: none !important;}
.ns_tb1{ display: none !important;}
.ns_xs{ display: none !important;}
.ns_xs{ display: none !important;}
.ns_xs3{ display: none !important;}
.ns_xs2{ display: none !important;}
.ns_xs1{ display: none !important;}


/*1025以上表示*/
@media screen and (min-width: 1025px) { .ns_pc{display: block !important;}}

/*769〜1024表示*/
@media screen and (min-width: 769px) and (max-width: 1024px) {.ns_tb4{display: block !important;}}
/*615〜768表示*/
@media screen and (min-width: 615px) and (max-width: 768px) {.ns_tb3{display: block !important;}}
/*515〜614表示*/
@media screen and (min-width: 515px) and (max-width: 614px) {.ns_tb2{display: block !important;}}
/*415〜514表示*/
@media screen and (min-width: 415px) and (max-width: 514px) {.ns_tb1{display: block !important;}}
/*414以下で表示*/
@media screen and (max-width:414px) {.ns_xs{display: block !important;}}
/*513以下で表示*/
@media screen and (min-width: 375px) and (max-width: 414px) {.ns_xs3{display: block !important;}}
/*414以下で表示*/
@media screen and (min-width: 321px) and (max-width: 374px) {.ns_xs2{display: block !important;}}
/*320以下で表示*/
@media screen and (max-width:320px) {.ns_xs1{display: block !important;}}




.no_border table {border: none!important;}
.no_border td {border: none!important;}


.ari_border td {border: solid 1px !important; padding: 6px}

.ari_pad td {padding: 6px !important;}
.ari_pad2 td {padding: 3px !important;}
.ari_pad3 td {padding: 0px !important;}


/*テキストアラインセンター*/

.tcet td{text-align: center !important ;}


/*バーティカルアラインミドル*/

/*パソコン*/
.tvem td {vertical-align: middle !important;　/*line-height: 8px !important; font-size: 8px !important;*/ }




/*二列から１列変化*/

.two_one{text-align: center !important; width: 100% !important;}
@media screen and (max-width:1240px) {.two_one{text-align: left !important; width: 100% !important;}}

.two_one2{width: 450px !important; margin-left: 10px !important; margin-right: 10px !important;}
@media screen and (max-width:1000px) {.two_one2{width: 50% !important;}}
@media screen and (max-width:900px) {.two_one2{width: 60% !important;}}
@media screen and (max-width:800px) {.two_one2{width: 70% !important;}}
@media screen and (max-width:700px) {.two_one2{width: 80% !important;}}
@media screen and (max-width:600px) {.two_one2{width: 90% !important;}}
@media screen and (max-width:500px) {.two_one2{width: 100% !important; margin-left: 0px !important; margin-right: 0px !important;}}





/*本書の説明のグリッド*/


.infobox_bg{
	
width: 100%; 
background-color: #00b0ff;

}


@media (max-width: 2000px) {
  .infobox_bg {
    padding: 30px !important;
  }
}

@media (max-width: 940px) {
  .infobox_bg {
     padding: 20px !important;
  }
}

@media (max-width: 750px) {
  .infobox_bg {
     padding: 20px !important;
  }
}



.infobox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 画面の幅が800px以下の場合は3列に */
@media (max-width: 2000px) {
  .infobox {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 画面の幅が600px以下の場合は2列に */
@media (max-width: 940px) {
  .infobox {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 画面の幅が400px以下の場合は1列に */
@media (max-width: 750px) {
  .infobox {
    grid-template-columns: repeat(1, 1fr);
  }
}



/*白いボックスのCSS設定*/

.info_contents {
  background-color: white;
  border-radius: 10px; /* 角を丸く */
  padding: 20px; /* 内側の余白 */
  margin-bottom: 0px; /* ボックス同士の間隔 */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 影をつける */
}

/*タイトル部分（薄ピンクの背景）*/

.info_title {
  line-height: 32px !important;	
  text-align: center;
  background-color: #ffe3e3; /* 薄ピンク色 */
  color: #e20303; /* タイトルテキスト色 */
  
  margin-bottom: 15px; /* タイトルと内容の間隔 */
  border-radius: 5px; /* 角を丸く */
  font-weight: bold !important; /* フォント太さ */
}


@media (max-width: 2000px) {
  .info_title {
    font-size: 21px !important;
	padding: 10px; /* タイトルのパディング */  
  }
}

@media (max-width: 900px) {
  .info_title {
     font-size: 23px !important;
	 padding: 10px; /* タイトルのパディング */ 
  }
}

@media (max-width: 750px) {
  .info_title {
     font-size: 19px !important;
	 padding: 10px; /* タイトルのパディング */ 
  }
}






/*画像部分のCSS設定*/

.info_image {
  width: 100%; /* ボックスに対して幅を100%に */
  height: auto; /* 高さは自動調整 */
  margin-bottom: 15px; /* 画像とテキストの間隔 */
}

/*
画像タグ(<img>)はHTMLに直接書くとすると、以下のようになります。
<img src="path-to-your-image.jpg" alt="説明テキスト" class="image">*/




/*テキスト部分のCSS設定*/

.info_text {
  color: #333; /* テキスト色 */
  margin-bottom: 15px; /* テキストの下の余白 */
  font-size: 16px; /* フォントサイズ */
  line-height: 1.5; /* 行間 */
}


/*青いボックス内のテキスト設定*/

.buleinfo_text {
  background-color: #92e8ff; /* 明るい青色 */
  color: #000; /* テキスト色は白 */
  padding: 10px; /* パディング */
  border-radius: 5px; /* 角を丸く */
  font-weight: normal; /* フォント太さ */
  font-size: 15px !important;	
}


/* 画面の幅が800px以下の場合は3列に */
@media (max-width: 2000px) {
  .buleinfo_text {
    margin-top: 30px;
  }
}

/* 画面の幅が600px以下の場合は2列に */
@media (max-width: 900px) {
  .buleinfo_text {
    margin-top: 20px;
  }
}

/* 画面の幅が400px以下の場合は1列に */
@media (max-width: 750px) {
  .buleinfo_text {
    margin-top: 10px;
  }
}




/* 追加するアニメーション効果 */
.info_image, .buleinfo_text {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

.info_image.hide, .buleinfo_text.hide {
  opacity: 0;
  display: block !important; /* JavaScriptが実行されるまで要素を隠さないようにする */
  pointer-events: none; /* 要素が透明の間はクリックを無視する */
}


/*ふわふわ動くアニメーション*/

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
	
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている	*/
/*さらに	「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
  background: url("../images/kaisetu.svg") no-repeat center center / 185px auto;

  display: inline-block;
  transition: 1.5s ease-in-out;

/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
  width: 185px;
  height: 100px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.fuwafuwa2 {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
	
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている	*/
/*さらに	「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
  background: url("../images/check.svg") no-repeat center center / 185px auto;

  display: inline-block;
  transition: 1.5s ease-in-out;

/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
  width: 185px;
  height: 100px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa2 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.fuwafuwa3 {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
	
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている	*/
/*さらに	「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
  background: url("../images/kakomon.svg") no-repeat center center / 185px auto;

  display: inline-block;
  transition: 1.5s ease-in-out;

/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
  width: 185px;
  height: 100px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa3 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.fuwafuwa4 {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
	
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている	*/
/*さらに	「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
  background: url("../images/aka.svg") no-repeat center center / 185px auto;

  display: inline-block;
  transition: 1.5s ease-in-out;

/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
  width: 185px;
  height: 100px;
  margin-top: 10px;
}
 
@keyframes fuwafuwa4 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.fuwafuwa5 {
 animation: fuwafuwa 3s ease-in-out infinite alternate;
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている */
/*さらに 「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
 background: url("../images/series.svg") no-repeat center center / 185px auto;
 display: inline-block;
 transition: 1.5s ease-in-out;
/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
 width: 185px;
 height: 100px;
 margin-top: 10px;
}

@keyframes fuwafuwa5 {
 0% {
  transform:translate(0, 0) rotate(-7deg);
 }
 50% {
  transform:translate(0, -7px) rotate(0deg);
 }
 100% {
  transform:translate(0, 0) rotate(7deg);
 }
}

.fuwafuwa6 {
 animation: fuwafuwa 3s ease-in-out infinite alternate;
/*個体のサイズを変更、現在は 250px auto に設定されているため、幅が250px、高さが自動で調整されている */
/*さらに 「center center」なので、画像はコンテナの中心に配置されている。これを画像を左に20px、中央から下に10pxの位置に移動させたい場合は、次のように設定
background-position: calc(50% - 20px) calc(50% + 10px);*/
 background: url("../images/onsei.svg") no-repeat center center / 185px auto;
 display: inline-block;
 transition: 1.5s ease-in-out;
/*以下は、要素のサイズ。ここでは、画像自体が背景なので、以下より背景が大きいとはみ出た分が表示されない。逆に小さいと、画像周辺に余白が生まれることになる。上記のno-repeat center centerの意味は、この余白において、左によったり上によったり、真ん中にしたりということである。*/
 width: 185px;
 height: 100px;
 margin-top: 10px;
}

@keyframes fuwafuwa6 {
 0% {
  transform:translate(0, 0) rotate(-7deg);
 }
 50% {
  transform:translate(0, -7px) rotate(0deg);
 }
 100% {
  transform:translate(0, 0) rotate(7deg);
 }
}



/*青帯タイトル*/

.blue-bar {
  display: flex;
  align-items: center;
  background-color: #2a629a; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}

/* アイコンのスタイル */
.no_icon {
  flex-shrink: 0; /* サイズが縮まないように設定 */
  width: 3.5rem; /* アイコンの幅 */
  height: 3.5rem; /* アイコンの高さ */
  margin-right: 1rem; /* アイコンとテキストの間隔 */
}

/* タイトルテキストのスタイル */
.title-text {
  color: white; /* テキストの色 */
  font-size: 2.3rem; /* 文字サイズ */ 
  font-weight: bold;
  line-height: 1.5; /* 行の高さ */
  word-break: break-word; /* 長い単語を折り返す */
  flex-grow: 1; /* テキスト部分が残りの幅を使用 */
  white-space: normal; /* 折り返しを許可 */
}

/* テキストが2行以上の場合に対応するためにボックスの高さが伸びる */
.blue-bar {
  align-items: flex-start;
}


/* スマホ用のスタイル */
@media (max-width: 768px) {
  .no_icon {
    width: 2.5rem; /* アイコンの幅（スマホ用） */
    height: 2.5rem; /* アイコンの高さ（スマホ用） */
  }

  .title-text {
    font-size: 1.8rem; /* スマホでも同じ文字サイズ */
    position: relative; /* 相対位置を設定 */
    top: -2px; /* 2px上に移動 */
  }
}



/*赤帯タイトル*/

.red-bar {
  display: flex;
  align-items: center;
  background-color: #934444; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}

/* テキストが2行以上の場合に対応するためにボックスの高さが伸びる */
.red-bar {
  align-items: flex-start;
}


/*緑帯タイトル*/

.green-bar {
  display: flex;
  align-items: center;
  background-color: #456946; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}

/* テキストが2行以上の場合に対応するためにボックスの高さが伸びる */
.green-bar {
  align-items: flex-start;
}


/*萌黄帯タイトル*/

.yellow-bar {
  display: flex;
  align-items: center;
  background-color: #876C16; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}


/*空色帯タイトル*/

.skyblue-bar {
  display: flex;
  align-items: center;
  background-color: #2F6589; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}


/*紫帯タイトル*/

.purple-bar {
  display: flex;
  align-items: center;
  background-color: #995C99; /* 背景色 */
  border-radius: 8px; /* 角丸 */
  padding: 1rem; /* ボックス内のパディング */
  width: 100%; /* 幅を画面サイズに合わせる */
  box-sizing: border-box; /* パディングを含む幅の計算 */
}



/*表のカスタマイズ*/

/* 表全体のレイアウト変更 */
/* ebt2は両端のみ線なし*/
.ebt2 table {
  border-collapse: collapse; /* 表全体をcollapseに変更 */
  width: 100%; /* 表の幅を全体に広げる */
  margin-bottom: 15px; /* 表の下に15pxのマージンを追加 */
  border-left: none; /* 表全体の左ボーダーを削除 */
  border-right: none; /* 表全体の右ボーダーを削除 */
  background-color: #fff; /* 背景白色 */
}

.ebt2 table tr th,
.ebt2 table tr td {
  border-top: 1.5px solid #d4e0ba; /* 上ボーダー */
  border-bottom: 1.5px solid #d4e0ba; /* 下ボーダー */
  border-left: 1.5px solid #d4e0ba; /* 表内の縦ボーダーを表示 */
  border-right: none; /* セルの右ボーダーを削除 */
  padding: calc(0.5em); /* 上下のマージンを文字サイズの0.7倍 */
  text-align: left; /* デフォルトの左揃え */
  vertical-align: middle; /* セル内の縦方向揃えを中央に */
}

.ebt2 table tr td:first-child,
.ebt2 table tr th:first-child {
  border-left: none; /* 最左列の左ボーダーを削除 */
}

.ebt2 table tr td:last-child,
.ebt2 table tr th:last-child {
  border-right: none; /* 最右列の右ボーダーを削除 */
}

/* 背景色の指定 */
.ebt2 table tr th.bg-cell,
.ebt2 table tr td.bg-cell {
  background-color: #f2fbf5; /* 指定された背景色 */
  text-align: center; /* 背景色ありの場合は中央揃え */
}

.ebt2 table tr th.no-bg,
.ebt2 table tr td.no-bg {
  background-color: transparent; /* 背景色なし */
  text-align: left; /* 背景色なしの場合は左揃え */
}

/* 最下行の横ボーダーを強制的に統一 */
.ebt2 table tr:last-of-type th,
.ebt2 table tr:last-of-type td {
  border-bottom: 1.5px solid #d4e0ba; /* 他のボーダーと同じ色と太さに設定 */
}

/* ebt3は両端線あり*/
.ebt3 table {
  border-collapse: collapse; /* 表全体をcollapseに変更 */
  width: 100%; /* 表の幅を全体に広げる */
  margin-bottom: 15px; /* 表の下に15pxのマージンを追加 */
  background-color: #fff; /* 背景白色 */
}

.ebt3 table tr th,
.ebt3 table tr td {
  border-top: 1.5px solid #d4e0ba; /* 上ボーダー */
  border-bottom: 1.5px solid #d4e0ba; /* 下ボーダー */
  border-left: 1.5px solid #d4e0ba; /* 表内の左ボーダーを表示 */
  border-right: 1.5px solid #d4e0ba; /* 表内の右ボーダーを表示 */
  padding: calc(0.5em); /* 上下のマージンを文字サイズの0.7倍 */
  text-align: left; /* デフォルトの左揃え */
  vertical-align: middle; /* セル内の縦方向揃えを中央に */
}

/* 背景色の指定 */
.ebt3 table tr th.bg-cell,
.ebt3 table tr td.bg-cell {
  background-color: #f2fbf5; /* 指定された背景色 */
  text-align: center; /* 背景色ありの場合は中央揃え */
}

.ebt3 table tr th.no-bg,
.ebt3 table tr td.no-bg {
  background-color: transparent; /* 背景色なし */
  text-align: left; /* 背景色なしの場合は左揃え */
}

/* 最下行の横ボーダーを強制的に統一 */
.ebt3 table tr:last-of-type th,
.ebt3 table tr:last-of-type td {
  border-bottom: 1.5px solid #d4e0ba; /* 他のボーダーと同じ色と太さに設定 */
}

/*サイドカラムの指定//////////////////////////*/

/*もう一歩押さえよう*/

       .ippocon{
            display: flex;
            align-items: flex-start;
            gap: 15px; /* 文章とボックスの間の余白 */
            width: 100%;
            box-sizing: border-box;
        }

        .ippoleft_text {
            flex: 1; /* 文章部分は残りのスペースを占める */
            font-size: 16px;
        }

        .ippo {
            border: 2.5px solid #bc917a;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 25%; /* 親要素の25% */
        }

        .ippo img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
            width: 100%; /* ボックスの幅に合わせる */
            height: auto; /* 高さを自動調整 */
        }

        .ippo .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 7px 7px 10px 10px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }


        .ippo2 {
            border: 2.5px solid #bc917a;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 100%; /* 親要素の100% */
        }

        .ippo2 img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
        }

        .ippo2 .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 0px 7px 10px 12px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }

        .clear {
            clear: both; /* フロート解除 */
        }



/*ここがポイント*/

       .kokocon{
            display: flex;
            align-items: flex-start;
            gap: 15px; /* 文章とボックスの間の余白 */
            width: 100%;
            box-sizing: border-box;
        }

        .kokoleft_text {
            flex: 1; /* 文章部分は残りのスペースを占める */
            font-size: 16px;
        }

        .koko {
            border: 2.5px solid #79ba78;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 25%; /* 親要素の25% */
        }

        .koko img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
            width: 100%; /* ボックスの幅に合わせる */
            height: auto; /* 高さを自動調整 */
        }

        .koko .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 7px 7px 10px 10px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }


        .koko2 {
            border: 2.5px solid #79ba78;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 100%; /* 親要素の100% */
        }

        .koko2 img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
        }

        .koko2 .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 0px 7px 10px 12px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }

        .clear {
            clear: both; /* フロート解除 */
        }


/*覚え方のコツ*/

       .kotsucon{
            display: flex;
            align-items: flex-start;
            gap: 15px; /* 文章とボックスの間の余白 */
            width: 100%;
            box-sizing: border-box;
        }

        .kotsuleft_text {
            flex: 1; /* 文章部分は残りのスペースを占める */
            font-size: 16px;
        }

        .kotsu {
            border: 2.5px solid #9b7dad;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 25%; /* 親要素の25% */
        }

        .kotsu img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
            width: 100%; /* ボックスの幅に合わせる */
            height: auto; /* 高さを自動調整 */
        }

        .kotsu .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 7px 7px 10px 10px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }


        .kotsu2 {
            border: 2.5px solid #9b7dad;
            border-right-width: 6px;
            border-bottom-width: 6px;
            padding: 0; /* ボックス内の余白をリセット */
            position: relative;
            box-sizing: border-box;
            width: 100%; /* 親要素の100% */
        }

        .kotsu2 img {
            display: block; /* ブラウザが画像下に余白を追加するのを防止 */
            position: relative;
        }

        .kotsu2 .bun {
            margin: 0; /* 外側余白をリセット */
            padding: 0px 7px 10px 12px; /* 内側に10pxの余白を設定 */
			font-size: 14px;
            position: relative;
            z-index: 1;
        }

        .clear {
            clear: both; /* フロート解除 */
        }


.note-background {
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, #fff8e1 90%, #fbe9e7 91%), /* 薄いクリーム色の上部と下部 */
                repeating-linear-gradient(to bottom, #cccccc 0, #cccccc 1px, #fff8e1 30px); /* 横罫線に合わせた背景 */
    background-size: 100% 30px;
    background-color: #fff8e1; /* 全体の背景色を薄いクリーム色に */
    padding: 5px 20px 0px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #999999; /* 太く、濃い外枠 */
}

/* 左側の四角い穴 */
.note-background::before {
    content: "";
    position: absolute;
    top: 20px; /* 上部の余白を増やして一番上の穴を減らす */
    left: 0; /* ノートの左端に配置 */
    width: 20px; /* 穴の幅 */
    height: calc(100% - 40px); /* 上下を減らすため全体の高さを縮小 */
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 15px, #000 16px, transparent 30px); /* 穴の間隔 */
}


/*節タイトル切り替え*/

        /* Default styling */
        .setsu-image {
            display: block;
            max-width: 100%;
            height: auto;
			image-rendering: auto;
        }

        /* Hide images conditionally */
        .setsu-image.a {
            display: block;
			image-rendering: auto;
        }

        .setsu-image.b {
            display: none;
			image-rendering: auto;
        }

        @media screen and (max-width: 700px) {
            .setsu-image.a {
                display: none;
            }

            .setsu-image.b {
                display: block;
				image-rendering: auto;
            }
        }



/* 75%幅、センタリング */
.plc_75 {
    width: 100%; /* 親要素を画面幅いっぱいに設定 */
    max-width: 1060px; /* キャンバスの最大幅 */
    margin: 0 auto; /* 中央配置 */
    padding: 0; /* 余白なし */
    box-sizing: border-box;
    text-align: center; /* 子要素のセンタリング */
}

.responsive-image-75 {
    width: 750px; /* 幅750pxで固定 */
    height: auto; /* アスペクト比を維持 */
    display: inline-block; /* センタリングでの余計な影響を回避 */
}

/* 幅750px以下での調整 */
@media (max-width: 750px) {
    .responsive-image-75 {
        width: calc(100% - 30px); /* 画面幅 - 左右余白15pxずつ */
        max-width: none; /* 最大幅制限を解除 */
    }
}

@media (max-width: 400px) {
    .responsive-image-75 {
        width: 100%; /* 親要素幅いっぱい */
        max-width: none; /* 最大幅制限を解除 */
    }
}

/* 100%幅表示の設定 */
.plc_100 {
    width: 100%; /* 親要素を画面幅いっぱいに設定 */
    max-width: 1060px; /* キャンバスの最大幅 */
    margin: 0 auto; /* 中央配置 */
    padding: 0; /* 余白なし */
    box-sizing: border-box;
}

.responsive-image-100 {
    width: 100%; /* 親要素幅いっぱいに画像を設定 */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 不要な余白を排除 */
}

/* 15%幅、右寄せ */
.plc_15_r {
    width: 100%;
    max-width: 1060px; /* キャンバスの幅 */
    margin: 0 auto; /* 中央配置 */
    padding: 0 30px; /* 左右余白 */
    box-sizing: border-box;
    text-align: right; /* 子要素の右寄せ */
}

.responsive-image-15-r {
    width: 15%; /* 初期設定で横幅の15% */
    max-width: 150px; /* 最大幅150px */
    height: auto; /* アスペクト比を維持 */
    display: inline-block; /* 右寄せの影響を確実に */
}

/* 15%幅、左寄せ */
.plc_15_l {
    width: 100%;
    max-width: 1060px; /* キャンバスの幅 */
    margin: 0 auto; /* 中央配置 */
    padding: 0 30px; /* 左右余白 */
    box-sizing: border-box;
    text-align: left; /* 子要素の左寄せ */
}

.responsive-image-15-l {
    width: 15%; /* 初期設定で横幅の15% */
    max-width: 150px; /* 最大幅150px */
    height: auto; /* アスペクト比を維持 */
    display: inline-block; /* 左寄せの影響を確実に */
}

/* 20%幅、右寄せ */
.plc_20_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-20-r {
    width: 20%;
    max-width: 200px;
    height: auto;
    display: inline-block;
}

/* 20%幅、左寄せ */
.plc_20_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-20-l {
    width: 20%;
    max-width: 200px;
    height: auto;
    display: inline-block;
}

/* 25%幅、右寄せ */
.plc_25_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-25-r {
    width: 25%;
    max-width: 250px;
    height: auto;
    display: inline-block;
}

/* 25%幅、左寄せ */
.plc_25_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-25-l {
    width: 25%;
    max-width: 250px;
    height: auto;
    display: inline-block;
}

/* 30%幅、右寄せ */
.plc_30_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-30-r {
    width: 30%;
    max-width: 300px;
    height: auto;
    display: inline-block;
}

/* 30%幅、左寄せ */
.plc_30_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-30-l {
    width: 30%;
    max-width: 300px;
    height: auto;
    display: inline-block;
}

/* 35%幅、右寄せ */
.plc_35_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-35-r {
    width: 35%;
    max-width: 350px;
    height: auto;
    display: inline-block;
}

/* 35%幅、左寄せ */
.plc_35_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-35-l {
    width: 35%;
    max-width: 350px;
    height: auto;
    display: inline-block;
}

/* 40%幅、右寄せ */
.plc_40_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-40-r {
    width: 40%;
    max-width: 400px;
    height: auto;
    display: inline-block;
}

/* 40%幅、左寄せ */
.plc_40_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-40-l {
    width: 40%;
    max-width: 400px;
    height: auto;
    display: inline-block;
}

/* 45%幅、右寄せ */
.plc_45_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-45-r {
    width: 45%;
    max-width: 450px;
    height: auto;
    display: inline-block;
}

/* 45%幅、左寄せ */
.plc_45_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-45-l {
    width: 45%;
    max-width: 450px;
    height: auto;
    display: inline-block;
}

/* 50%幅、右寄せ */
.plc_50_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-50-r {
    width: 50%;
    max-width: 500px;
    height: auto;
    display: inline-block;
}

/* 50%幅、左寄せ */
.plc_50_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-50-l {
    width: 50%;
    max-width: 500px;
    height: auto;
    display: inline-block;
}

/* 55%幅、右寄せ */
.plc_55_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-55-r {
    width: 55%;
    max-width: 550px;
    height: auto;
    display: inline-block;
}

/* 55%幅、左寄せ */
.plc_55_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-55-l {
    width: 55%;
    max-width: 550px;
    height: auto;
    display: inline-block;
}

/* 60%幅、右寄せ */
.plc_60_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-60-r {
    width: 60%;
    max-width: 600px;
    height: auto;
    display: inline-block;
}

/* 60%幅、左寄せ */
.plc_60_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-60-l {
    width: 60%;
    max-width: 600px;
    height: auto;
    display: inline-block;
}

/* 65%幅、右寄せ */
.plc_65_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-65-r {
    width: 65%;
    max-width: 650px;
    height: auto;
    display: inline-block;
}

/* 65%幅、左寄せ */
.plc_65_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-65-l {
    width: 65%;
    max-width: 650px;
    height: auto;
    display: inline-block;
}

/* 70%幅、右寄せ */
.plc_70_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-70-r {
    width: 70%;
    max-width: 700px;
    height: auto;
    display: inline-block;
}

/* 70%幅、左寄せ */
.plc_70_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-70-l {
    width: 70%;
    max-width: 700px;
    height: auto;
    display: inline-block;
}

/* 75%幅、右寄せ */
.plc_75_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-75-r {
    width: 75%;
    max-width: 750px;
    height: auto;
    display: inline-block;
}

/* 75%幅、左寄せ */
.plc_75_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-75-l {
    width: 75%;
    max-width: 750px;
    height: auto;
    display: inline-block;
}

/* 80%幅、右寄せ */
.plc_80_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-80-r {
    width: 80%;
    max-width: 800px;
    height: auto;
    display: inline-block;
}

/* 80%幅、左寄せ */
.plc_80_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-80-l {
    width: 80%;
    max-width: 800px;
    height: auto;
    display: inline-block;
}

/* 85%幅、右寄せ */
.plc_85_r {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: right;
}

.responsive-image-85-r {
    width: 85%;
    max-width: 850px;
    height: auto;
    display: inline-block;
}

/* 85%幅、左寄せ */
.plc_85_l {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: left;
}

.responsive-image-85-l {
    width: 85%;
    max-width: 850px;
    height: auto;
    display: inline-block;
}

/* 狭い画面幅での調整 */
@media (max-width: 1000px) {
    .responsive-image-15-r, .responsive-image-15-l {
        width: calc(100% - 60px); /* 画面幅 - 左右余白30pxずつ */
        max-width: 150px; /* 最大幅150px */
    }
    .responsive-image-20-r, .responsive-image-20-l {
        width: calc(100% - 60px);
        max-width: 200px;
    }
    .responsive-image-25-r, .responsive-image-25-l {
        width: calc(100% - 60px);
        max-width: 250px;
    }
    .responsive-image-30-r, .responsive-image-30-l {
        width: calc(100% - 60px);
        max-width: 300px;
    }
    .responsive-image-35-r, .responsive-image-35-l {
        width: calc(100% - 60px);
        max-width: 350px;
    }
    .responsive-image-40-r, .responsive-image-40-l {
        width: calc(100% - 60px);
        max-width: 400px;
    }
    .responsive-image-45-r, .responsive-image-45-l {
        width: calc(100% - 60px);
        max-width: 450px;
    }
    .responsive-image-50-r, .responsive-image-50-l {
        width: calc(100% - 60px);
        max-width: 500px;
    }
    .responsive-image-55-r, .responsive-image-55-l {
        width: calc(100% - 60px);
        max-width: 550px;
    }
    .responsive-image-60-r, .responsive-image-60-l {
        width: calc(100% - 60px);
        max-width: 600px;
    }
    .responsive-image-65-r, .responsive-image-65-l {
        width: calc(100% - 60px);
        max-width: 650px;
    }
    .responsive-image-70-r, .responsive-image-70-l {
        width: calc(100% - 60px);
        max-width: 700px;
    }
    .responsive-image-75-r, .responsive-image-75-l {
        width: calc(100% - 60px);
        max-width: 750px;
    }
    .responsive-image-80-r, .responsive-image-80-l {
        width: calc(100% - 60px);
        max-width: 800px;
    }
    .responsive-image-85-r, .responsive-image-85-l {
        width: calc(100% - 60px);
        max-width: 850px;
    }
}

@media (max-width: 500px) {
    .plc_15_r, .plc_15_l,
    .plc_20_r, .plc_20_l,
    .plc_25_r, .plc_25_l,
    .plc_30_r, .plc_30_l,
    .plc_35_r, .plc_35_l,
    .plc_40_r, .plc_40_l,
    .plc_45_r, .plc_45_l,
    .plc_50_r, .plc_50_l,
    .plc_55_r, .plc_55_l,
    .plc_60_r, .plc_60_l,
    .plc_65_r, .plc_65_l,
    .plc_70_r, .plc_70_l,
    .plc_75_r, .plc_75_l,
    .plc_80_r, .plc_80_l,
    .plc_85_r, .plc_85_l {
        padding: 0; /* 余白を削除 */
    }

    .responsive-image-15-r, .responsive-image-15-l {
        width: calc(100% - 30px); /* 画面幅 - 左右余白15pxずつ */
        max-width: 150px; /* 最大幅150px */
    }
    .responsive-image-20-r, .responsive-image-20-l {
        width: calc(100% - 30px);
        max-width: 200px;
    }
    .responsive-image-25-r, .responsive-image-25-l {
        width: calc(100% - 30px);
        max-width: 250px;
    }
    .responsive-image-30-r, .responsive-image-30-l {
        width: calc(100% - 30px);
        max-width: 300px;
    }
    .responsive-image-35-r, .responsive-image-35-l {
        width: calc(100% - 30px);
        max-width: 350px;
    }
    .responsive-image-40-r, .responsive-image-40-l {
        width: calc(100% - 30px);
        max-width: 400px;
    }
    .responsive-image-45-r, .responsive-image-45-l {
        width: calc(100% - 30px);
        max-width: 450px;
    }
    .responsive-image-50-r, .responsive-image-50-l {
        width: calc(100% - 30px);
        max-width: 500px;
    }
    .responsive-image-55-r, .responsive-image-55-l {
        width: calc(100% - 30px);
        max-width: 550px;
    }
    .responsive-image-60-r, .responsive-image-60-l {
        width: calc(100% - 30px);
        max-width: 600px;
    }
    .responsive-image-65-r, .responsive-image-65-l {
        width: calc(100% - 30px);
        max-width: 650px;
    }
    .responsive-image-70-r, .responsive-image-70-l {
        width: calc(100% - 30px);
        max-width: 700px;
    }
    .responsive-image-75-r, .responsive-image-75-l {
        width: calc(100% - 30px);
        max-width: 750px;
    }
    .responsive-image-80-r, .responsive-image-80-l {
        width: calc(100% - 30px);
        max-width: 800px;
    }
    .responsive-image-85-r, .responsive-image-85-l {
        width: calc(100% - 30px);
        max-width: 850px;
    }
}

@media (max-width: 400px) {
    .responsive-image-15-r, .responsive-image-15-l,
    .responsive-image-20-r, .responsive-image-20-l,
    .responsive-image-25-r, .responsive-image-25-l,
    .responsive-image-30-r, .responsive-image-30-l,
    .responsive-image-35-r, .responsive-image-35-l,
    .responsive-image-40-r, .responsive-image-40-l,
    .responsive-image-45-r, .responsive-image-45-l,
    .responsive-image-50-r, .responsive-image-50-l,
    .responsive-image-55-r, .responsive-image-55-l,
    .responsive-image-60-r, .responsive-image-60-l,
    .responsive-image-65-r, .responsive-image-65-l,
    .responsive-image-70-r, .responsive-image-70-l,
    .responsive-image-75-r, .responsive-image-75-l,
    .responsive-image-80-r, .responsive-image-80-l,
    .responsive-image-85-r, .responsive-image-85-l {
        width: 100%; /* 親要素幅いっぱい */
        max-width: none; /* 最大幅制限を解除 */
    }
}