@charset "utf-8";
/* CSS Document */
.h3-head-title-01{ background-color: #e7e9f3; border-top: 2px solid #172685; margin-bottom: 10px;}
.h3-head-title-01 p,.bto-option-explanation-area-01 dt p{ background-image: url(../../images/br_common_png/br_icon_common_06.png); background-repeat: no-repeat;}
.h3-head-title-01 p{ background-position: -5px -445px; color: #172685; font-size: 16px; font-weight: bold; padding: 2px 2px 2px 30px; word-break: break-all;}
.bto-option-area-01{ margin: 20px auto 40px; width: 100%;}
.bto-option-area-01::after{ clear: both; content: ""; display: block;}
.bto-option-area-01 li{ float: left; margin: 0 20px 10px 0; width: 172px;}
.bto-option-area-01 li:nth-child(4n){ margin: 0 0 10px;}
.bto-option-area-01 li a{ display: block; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none;}
.bto-option-area-01 li a:hover span{ border: 1px solid #ff0000;}
.bto-option-area-01 li a span{ background-image: url("../../images/bto-option/guide-bto-option-bt-01.png"); background-repeat: no-repeat; border-radius: 6px; border: 1px solid #172685; display: block; height: 90px; margin-bottom: 4px; position: relative; text-indent: -9999px;}
.bto-option-area-01 li a span::before,.bto-option-area-01 li a span::after{ content: ""; display: inline-block; height: 16px; position: absolute; width: 16px;}
.bto-option-area-01 li a span::before{ background-color: #172685; bottom: 7px; border-radius: 50%; right: 7px;}
.bto-option-area-01 li a:hover span::before{ background-color: #ff0000;}
.bto-option-area-01 li a span::after{ color: #ffffff; content: "▲"; bottom: 7px; font-size: 10px; right: 7px; text-indent: initial; transform: rotate(90deg) scale(0.8);}
.bto-option-area-01 li:first-child a span{ background-position: center 0;}
.bto-option-area-01 li:nth-child(2) a span{ background-position: center -120px;}
.bto-option-area-01 li:nth-child(3) a span{ background-position: center -240px;}
.bto-option-area-01 li:nth-child(4) a span{ background-position: center -360px;}
.bto-option-area-01 li:nth-child(5) a span{ background-position: center -480px;}
.bto-option-area-01 li:nth-child(6) a span{ background-position: center -600px;}
.bto-option-area-01 li:nth-child(7) a span{ background-position: center -720px;}
.bto-option-area-01 li:nth-child(8) a span{ background-position: center -840px;}
.bto-option-area-01 li:nth-child(9) a span{ background-position: center -960px;}
.bto-option-area-01 li:nth-child(10) a span{ background-position: center -1080px;}
.bto-option-area-01 li:nth-child(11) a span{ background-position: center -1200px;}
.bto-option-explanation-area-01 dt{ margin-bottom: 6px;}
.bto-option-explanation-area-01 dt p{ background-position: -15px -720px; font-size: 14px; font-weight: bold; line-height: 18px; padding-left: 20px;}
.bto-option-explanation-area-01 dd{ margin-bottom: 60px;}
.bto-option-explanation-area-01 dd p{ font-size: 14px; line-height: 19px; text-align: justify;}
.bto-option-explanation-area-01 dd p.recommendation{ margin-top: 20px;}
.bto-option-explanation-area-01 dd p.color-666666{ color: #666666;}
.bto-option-explanation-area-01 dd p span{ color: #ff0000;}
.how-to-add{ margin-top: 20px;}
.how-to-add dd{ padding-left: 20px;}
.how-to-add dd p{ margin-top: 6px; width: 640px;}
@media screen and (max-width: 799px){
.bto-option-area-01{ width: 96%;}
.bto-option-explanation-area-01{ margin: 0 auto; width: 96%;}
.bto-option-area-01 li a:hover span{ border: 1px solid #172685;}
.bto-option-area-01 li a:hover span::before{ background-color: #172685;}
}
@media screen and (max-width: 796px){
.bto-option-area-01 li{ width: 27%;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 3% 10px;}
}
@media screen and (max-width: 689px){
.how-to-add dd img{ height: auto; width: 100%;}
.how-to-add dd p{ width: 100%;}
}
@media screen and (max-width: 629px){
.bto-option-area-01 li{ width: 29%;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 1% 10px;}	
}
@media screen and (max-width: 589px){
.bto-option-area-01 li{ width: 38%;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 6% 10px;}	
}
@media screen and (max-width: 469px){
.bto-option-area-01 li{ width: 46%;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 2% 10px;}	
}
@media screen and (max-width: 389px){
.bto-option-area-01 li{ width: 50%;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 25% 10px;}	
}
@media screen and (max-width: 375px){
.bto-option-area-01 li{ float: none; width: 172px;}
.bto-option-area-01 li,.bto-option-area-01 li:nth-child(4n){ margin: 0 auto 10px;}	
}