@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css");
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");

/*|||||||||||||| ベース ||||||||||||||*/
body{font-family: YakuHanJP, "Public Sans", "Noto Sans JP", sans-serif;}
img{max-width: 100%;vertical-align: bottom;}
h1{position: absolute;opacity: 0;}

@media only screen and (max-width: 1100px) {
body{line-height: 1.5;font-size: 20px;}
}

@media only screen and (min-width: 769px) {
body{line-height: 1.5;font-size: 20px;}
.sp,
[src*="_sp."]{display: none;}
section{margin-bottom: 5em;}
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
body{font-size: 1.9vw;}
}

@media only screen and (max-width: 768px) {
body{line-height: 1.5;font-size: 14px;}
img{width: 100%;}
.pc,
[src*="_pc."]{display: none !important;}
section{margin-bottom: 40px;}
}

/*|||||||||||||| ヘッダー ||||||||||||||*/
header{padding: 20px 35px;max-width: 100%;height: auto;}
.scroll_down header{box-shadow: 0 0 5px rgba(0,0,0,0.2);}
header .headerflex{display: flex;justify-content: space-between;align-items: center;}
header span img{width: 140px;}

@media screen and (max-width: 768px) {
header{padding: 10px 15px;}
header span img{width: 100px;}
}

/*|||||||||||||| メイン ||||||||||||||*/
main{height: 40em;background: url("../img/main_bk.webp") no-repeat center center/cover;overflow: hidden;}
main .main_img{text-align: center;}
main .main_img img{height: 40em;}
main .main_copy{width: 72em;margin-inline: auto;position: absolute;top: 0;left: 0;right: 0;}
main .main_copy figure img{height: 40em;}
main .main_btn{position: absolute;left: 4.5em;bottom: 5em;}
main .main_btn a{font-size: 1.25em;width: 16.8em;}

@media screen and (max-width: 1440px) {
main{background-size: cover;font-size: 1.38889vw;}
}

@media screen and (max-width: 768px) {
main{height: 146.6vw;background: url("../img/main_bk.webp") no-repeat left center/cover;}
main .main_img img{height: auto;}
main .main_copy{width: 100%;}
main .main_copy figure img{height: auto;}
main .main_btn{left: 0;right: 0;bottom: 5vw;margin-inline: auto;padding: 0 3vw;}
main .main_btn a{font-size: 3.3vw;flex-grow: 1;}
}

/*|||||||||||||| コンテンツ共通 ||||||||||||||*/
.inner{max-width: 50em;margin-inline: auto;padding: 0;}
.item_tit{font-size: 1.6em;color: #c9151d;font-weight: 600;line-height: 1.4;}
.lead{font-size: 1em;}
* + .lead{margin-top: 0.5em;}
.contents_tit{text-align: center;margin-bottom: 2.2em;}
.contents_tit span{border-bottom: 0.25em solid #c9151d;font-size: 1.8em;font-weight: 600;display: inline-block;line-height: 140%;}
.contents_tit + p{font-size: 1.2em;text-align: center;margin-top: -0.7em;}
.product_btn{font-size: 1em;font-weight: 600;text-align: center;border-radius: 0.7em;display: block;border: 0.15em solid #c9151d;width: 21.5em;padding: 0.7em 0 0.6em;transition: 0.4s all;background: #c9151d;color: #fff;margin: 0 auto;}
.detail_btn_wrap{display: flex;justify-content: center;flex-wrap: wrap; gap: 1em 1em;}
.detail_btn{font-size: 0.8em;font-weight: 600;text-align: center;border-radius: 0.7em;display: block;border: 0.15em solid #c9151d;width: 14.5em;padding: 0.7em 0 0.6em;transition: 0.4s all;background: #fff;color: #c9151d;}

@media screen and (min-width: 769px) {
.product_btn:hover{background: #fff;color: #c9151d;}
.detail_btn:hover{background: #c9151d;color: #fff;}
}

@media screen and (max-width: 768px) {
.inner{width: 92%;}
.item_tit{font-size: 1.4em;}
.detail_btn{font-size: 0.9em;width: 13em;}
}

/*|||||||||||||| メイン下 ||||||||||||||*/
#intro{margin-top: 0.5em;}
.intro_item{display: grid;justify-content: space-between;grid-template-columns: 16% 80%;}
.intro_item > .item_tit{display: flex;align-items: flex-end;}
.intro_item > figure{grid-row: 1/3;grid-column: 1/2;}
.product_fig{background: #eaeff2;padding: 3.5em 0 2.5em;}
.product_fig figure{width: 50em;margin: 0 auto 3em;}
.development{display: flex;align-items: center;justify-content: space-between;padding: 1em;border: 1px solid #888;margin-top: 2.5em;transition: 0.3s all;}
.development > dt{width: 10.3em;}
.development > dd{width: calc(100% - 11.8em);}
.development > dd h3{font-size: 1.15em;color: #c9151d;font-weight: 600;line-height: 1.4;}
.development > dd p{color: #000;}
.award{padding: 1.5em;border: 2px solid #c9151d;margin-top: 1.5em;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 1.5em 0;}
.award h3{font-size: 1.15em;text-align: center;font-weight: 600;line-height: 1.4;width: 100%;}
.award figure{width: 7.625em;}
.award p{width: calc(100% - 11em);font-size: 0.82em;}

@media screen and (min-width: 769px) {
.development:hover{opacity: 0.6;}
}

@media screen and (max-width: 768px) {
.intro_item{grid-template-columns: 30% 67%;}
.product_fig{padding: 2em 1em 1.5em;}
.product_fig figure{width: 100%;margin: 0 auto 2em;}
.development{flex-wrap: wrap;padding: 1.5em;margin-top: 2.5em;}
.development > dt{width: 100%;margin-top: 1em;order: 2;}
.development > dd{width: 100%;}
.award{padding: 1.5em;border: 2px solid #c9151d;margin-top: 1.5em;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 1.5em 0;}
.award h3{font-size: 1.15em;text-align: center;font-weight: 600;line-height: 1.4;width: 100%;}
.award figure{width: 8em;}
.award p{width: 100%;margin-top: -1em;font-size: 0.9em;}
}

@media screen and (max-width: 550px) {
#intro{margin-top: 1em;}
.intro_item > .item_tit{grid-row: 1/2;grid-column: 1/3;}
.intro_item > figure{grid-row: 2/3;grid-column: 1/2;display: flex;align-items: flex-end;}
.intro_item > p{grid-row: 2/3;grid-column: 2/3;padding-bottom: 1em;}
}

/*|||||||||||||| 3機種を比較する ||||||||||||||*/
.product_inner{max-width: 57.5em;margin-inline: auto;padding: 0;}
.product_item{display: flex;justify-content: space-between;}
.product_item + .product_item{margin-top: 4em;}
.product_item > dt{width: 28.5em;}
.product_item > dd{width: calc(100% - 30.5em);display: flex;flex-direction: column;padding: 1em 0 2.5em;}
.product_item > dd .detail_btn_wrap{margin-top: auto;}
#outline{margin-top: 3.5em;}
#outline .item_tit{text-align: center;}
#outline .outline_wrap{margin-top: 1em;}
#outline table{font-size: 1em;}
#outline table tr > *{border: 1px solid #888;padding: 1em 0.5em;vertical-align: middle;text-align: center;}
#outline table tr > *:nth-child(1){white-space: nowrap;}
#outline table tr > th{text-align: left;}
#outline table tr:first-child > th:nth-of-type(n+2){text-align: center;}
#outline table tr:nth-child(3) > td,
#outline table tr:nth-child(4) > td{text-align: left;}
#outline table figure{width: 80%;margin-inline: auto;}

/* 商品概要テーブル：見出しを赤背景＋白文字、以降をストライプ表示 */
#outline table tr:first-child{
    background: #c9151d;
    color: #fff;
}
#outline table tr:first-child th{
    color: #fff;
    font-weight: 600;
}
#outline table tr:nth-child(n+2):nth-child(even){
    background: #fff;
}
#outline table tr:nth-child(n+2):nth-child(odd){
    background: #f3f3f3;
}

@media screen and (max-width: 768px) {
.product_item{flex-wrap: wrap;}
.product_item + .product_item{margin-top: 4em;}
.product_item > dt{width: 100%;}
.product_item > dd{width: 100%;display: flex;flex-direction: column;padding: 0.5em 1em 0;order: 2;}
.product_item > dd .detail_btn_wrap{margin-top: 1em;}
.product_item:nth-of-type(odd) > dd{margin-top: -1.8em;}
#outline{margin-top: 3.5em;}
#outline .outline_wrap{margin-top: 1em;overflow-x: scroll;margin-right: -4vw;width: 96vw;}
#outline table{font-size: 1em;width: 700px;}
}


/*|||||||||||||| 動画でわかる電ドラボール ||||||||||||||*/
.movie_list{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 2em 0;}
.movie_list > li{width: 24em;}
.product_movie{width: 100%;max-width: 640px;aspect-ratio: 16 / 9;}
.product_movie iframe{width: 100%;height: 100%;}
.product_movie .lead{text-align: center;margin-top: 0.2em;}

@media screen and (max-width: 768px) {
.movie_list{gap: 2em 0;}
.movie_list > li{width: 100%;}
}

/*|||||||||||||| 電ドラボールを、もっと便利に ||||||||||||||*/
.useful_list{display: flex;justify-content: center;flex-wrap: wrap;gap: 2em 2em;margin-top: 2.5em;}
.useful_list > li{width: 24em;border: 1px solid #888;display: flex;flex-direction: column;padding-bottom: 1em;}
.useful_list > li h4{background: #c9151d;color: #fff;text-align: center;padding: 0.6em 0;font-size: 0.95em;}
.useful_list > li figure{margin: 1em 1em 0;}
.useful_list > li p{margin: 1em 1.5em 1em;font-size: 0.8em;}
.useful_list > li .detail_btn_wrap{margin-top: auto;}

@media screen and (max-width: 768px) {
.useful_list > li{width: 100%;}
.useful_list > li h4{font-size: 1em;}
.useful_list > li p{font-size: 0.9em;}
}


/*||||||||||||||  よくある質問  ||||||||||||||*/
.questions{border: 1px solid #ccc;border-radius: 1.25em;overflow: hidden;margin-bottom: 1.875em;cursor: pointer;font-size: 0.8em;}
.questions:last-of-type{margin-bottom: 0;}
.questions > dt{background: #f3f3f3;padding: 1.875em 2.5em 1.875em 4.375em;font-weight: 600;}
.questions > dt::before{color: #c9151d;content: "Q";font-weight: 600;}
.questions > dd{border-top: 1px solid #ccc;padding: 1.875em 4.375em 1.875em 4.375em;display: none;}
.questions > dd a{text-decoration: underline;}
.questions > dd::before{content: "A";}
.questions > *::before{position: absolute;left: 2.5em;}
.questions > dt::after{font-size: 1.375em;content: "＋";position: absolute;right: 1.875em;top: 0;bottom: 0;margin: auto 0;display: flex;align-items: center;}
.questions.open .question::after{content: "－";}
#faq .product_btn{margin-top: 2em;}

@media screen and (max-width: 768px) {
.questions{border-radius: 1em;margin-bottom: 1.875em;font-size: 1em;}
.questions > dt{background: #f3f3f3;padding: 1em 2.5em 1em 3em;}
.questions > dd{padding: 1em 1.5em 1em 3em;}
.questions > *::before{left: 1.5em;}
.questions > dt::after{right: 0.7em;}
}

/*|||||||||||||| フッター ||||||||||||||*/
footer{padding: 20px;text-align: center;font-size: 11px;background: #c4c4c4;color: #4c4c4c;}

@media screen and (max-width: 768px) {
footer{padding: 12px;font-size: 11px;}
}