@charset "utf-8";
/* CSS Document */

/*--------------------------------------
　Main Index
---------------------------------------*/

/*共通*/

#index {
/*overflow: hidden;*/
}
#index .sec {
margin: 0 auto;
position: relative;
}
#contents .captionWrap {
overflow: hidden;
white-space: nowrap;
}
#contents .captionWrap .caption {
overflow-x: scroll;
/*height: calc(100% + 18px);*/
}

#contents {
overflow-x: hidden;
}
/*各セクション*/

.sitename {
color: #FFF;
padding: 2px 10px;
}

#keyArea {
background: url("img/key.png") 50% 0 no-repeat;
background-size: 100% auto;
padding-bottom: 34%;
margin-bottom: -480px;
position: relative;
z-index: 1;
}
@media screen and (max-width: 1454px) {
#keyArea {
margin-bottom: -33%;
}
#contents.topPage {
position: relative;
top: -60px;
margin-bottom: -60px;
}
}
@media screen and (max-width: 1399px) {
#keyArea {
background: url("img/key.png") 50% 0 no-repeat;
background-size: 1400px auto;
padding-bottom: 305px;
margin-bottom: -296px;
}
#contents.topPage {
position: relative;
top: -80px;
margin-bottom: -80px;
}
}


#keyArea .wi1000 {
padding: 50px 0 0 0;
}
#keyArea .logo {
width: 190px;
float: left;
}
#keyArea .logo img {
image-rendering: -webkit-optimize-contrast;
}

#keyArea .right {
width: 620px;
float: right;
}
#keyArea .right * {
color: #FFF;
}

#keyArea .mainTit {
text-shadow: #000 3px 3px;
font-size: 3.6rem;
font-weight: 600;
line-height: 6rem;
margin: 0 0 30px 0;
position: relative;
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#keyArea .mainTit span {
font-size: 3.6rem;
font-weight: 600;
color: #ff6866;
}

#keyArea .lead {
margin: 0 0 40px 0;
text-shadow: black 1px 1px 2px,
black -1px 1px 2px,
black 1px -1px 2px,
black -1px -1px 2px;
}
#keyArea .btn_anc {
width: 420px;
margin: 0 auto;
}
#keyArea .btn_anc a {
background: #105376 url("img/arr_white_down.png") right 20px top 50% no-repeat;
background-size: 12px auto;
padding: 15px;
border-radius: 5px;
display: block;
text-align: center;
font-size: 1.6rem;
font-weight: bold;
image-rendering: -webkit-optimize-contrast;
box-shadow: 0 3px 0 0 #000;
}
#keyArea .btn_anc a:hover {
opacity: 0.7;
}



/*共通*/

.fc_red {
color: #951816;
}
#index .titArea {
margin: 0 auto 60px;
}
#index .titArea .en_tit {
background: url("img/icon_tit.png") 50% 50% no-repeat;
background-size: 60px auto;
font-size: 1.5rem;
color: #951816;
font-weight: bold;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
text-align: center;
padding: 20px 0 16px 0;
margin: 0 0 30px 0;
}

#index .titArea p {
margin: 0 0 1rem 0;
padding: 0 96px;
}
#index .idxh2 {
color: #000;
text-align: center;
font-size: 3.6rem;
margin: 0 0 40px 0;
padding: 0;
position: relative;
background: none;
line-height: 1.5;
}
#index .idxh2 a {
position: relative;
color: #000;
background: none;
display: inline-block;
}

/* Firefox */
@-moz-document url-prefix(){

#index .idxh2 a {
line-height: 1em;
}

#index #makerList .titArea .subTxt,
#index #guide .titArea .idxh2 .subTxt,
#index #comList .idxh2 .subTxt {
top:-2.8rem;
}

}

#index .idxh2 a:after {
content: "";
background: url("img/arr_black.png") no-repeat;
background-size: 8px auto;
width: 8px;
height: 14px;
margin: 0;
padding: 0;
position: absolute;
right: -20px;
top: calc(50% - 5px);
image-rendering: -webkit-optimize-contrast;
}
#index .idxh2 a:hover {
opacity: 0.7;
}
#index .idxh2 .subTxt {
font-size: 1.1rem;
top: -10px;
}
#index .idxh2 .fc_red {
font-size: 3.6rem;
color: #951816;
}


/*check_point*/
#index #check_point {
padding: 0 0 50px 0;
}
#index #check_point .wi1000 {
position: relative;
}
#index #check_point .wi1000:before {
content: "";
position: absolute;
background: url("img/deco01.png") no-repeat;
background-size: 265px auto;
width: 265px;
height: 524px;
bottom: -34%;
left: -200px;
z-index: 2;
}
#index #check_point:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
bottom: -200px;
right: 0;
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #check_point .titArea {
width: 600px;
margin: 0 0 50px 0;
}
#index #check_point .titArea .en_tit,
#index #check_point .titArea .idxh2 {
text-align: left;
}
#index #check_point .titArea p {
padding: 0;
}
#index #check_point .titArea .en_tit {
background: url("img/icon_tit.png") 0 50% no-repeat;
background-size: 60px auto;
padding: 20px 0 16px 20px;
}
#index #check_point .box3 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
z-index: 2;
}
#index #check_point .box3 .sBox {
position: relative;
border: 1px solid #951816;
padding: 20px;
width: calc((100% - 40px) / 3);
margin: 0 20px 0 0;
background: #FFF;
}
#index #check_point .box3 .sBox:before {
content: "";
background: #951816;
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 98px;
}
#index #check_point .box3 .sBox:last-child {
margin: 0;
}
#index #check_point .box3 .sBox .idxh3 {
position: relative;
font-size: 2.4rem;
line-height: 3.4rem;
margin: 0 0 25px 0;
padding: 10px 0 25px 0;
border: none;
border-bottom: 2px solid #951816;
background: none;
}
#index #check_point .box3 .sBox .idxh3:before {
content: "";
background: #951816;
width: 62px;
height: 62px;
position: absolute;
top: -20px;
right: -20px;
transform: rotate(45deg);
}
#index #check_point .box3 .sBox .idxh3:after {
color: #FFF;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-size: 3.6rem;
position: absolute;
top: -5px;
right: -10px;
}
#index #check_point .box3 .sBox:nth-child(1) .idxh3:after {
content: "01";
}
#index #check_point .box3 .sBox:nth-child(2) .idxh3:after {
content: "02";
}
#index #check_point .box3 .sBox:nth-child(3) .idxh3:after {
content: "03";
}



/*recommended*/
#index #recommended {
padding: 180px 0 0 0;
background: #f7f7f7;
}
#index #recommended .titArea {
position: relative;
}
#index #recommended .titArea:before {
content: "";
position: absolute;
background: url("img/deco02.png") no-repeat;
background-size: 263px auto;
width: 263px;
height: 410px;
bottom: -34%;
right: -190px;
}
#index #recommended .titArea .idxh2 .fs_sma {
font-size: 3rem;
}
#index #recommended .companyBox_odd {
padding: 0 0 250px 0;
}
#index #recommended .companyBox_even {
padding: 50px 0 240px 0;
background: #eaeaea;
position: relative;
}
#index #recommended .companyBox_even:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
top: -200px;
right: 0;
background: linear-gradient(to bottom left, rgba(0,0,0,0) 50%, #eaeaea 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}


#index #recommended .companyBox_even .block:after {
content: "";
position: absolute;
background: url("img/deco03.png") no-repeat;
background-size: 224px auto;
width: 224px;
height: 543px;
top: -540px;
left: -260px;
z-index: 2;
}

#index #recommended .companyBox_even .block:before {
content: "";
position: absolute;
background: url("img/deco04.png") no-repeat;
background-size: 463px auto;
width: 463px;
height: 318px;
top: -330px;
right: -440px;
z-index: 2;
}

#index #recommended .companyBox_odd,
#index #recommended .companyBox_even {
position: relative;
z-index: 1;
}
#index #recommended .block {
border: 1px solid #951816;
background: #FFF;
position: relative;
}





#index #recommended .block .idxh3 {
background: #951816;
color: #FFF;
text-align: center;
border: none;
font-size: 4rem;
position: relative;
padding: 22px 50px;
margin: 0;
line-height: 5.6rem;
}
#index #recommended .block .idxh3:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 80px 140px 0 0;
border-color: #ac1d1b transparent transparent transparent;
}
#index #recommended .block .idxh3:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 80px 140px;
border-color: transparent transparent #ac1d1b transparent;
}
#index #recommended .block .detail_inner {
padding: 60px 40px;
position: relative;
}
#index #recommended .block .detail_inner:before {
content: "";
position: absolute;
top: 0;
left: calc(50% - 50px);
width: 0;
height: 0;
border-style: solid;
border-width: 20px 50px 0 50px;
border-color: #951816 transparent transparent transparent;
}

#index #recommended .block .topBox {
margin: 0 0 60px 0;
}
#index #recommended .block .topBox .left {
width: 440px;
float: left;
}
#index #recommended .block .topBox .mTit {
font-size: 3rem;
font-weight: bold;
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serifl;
border-top: 2px solid #951816;
border-bottom: 2px solid #951816;
padding: 20px 0 20px 60px;
background: url("img/tit_arr.png") 0 50% no-repeat;
background-size: 40px auto;
margin: 0 0 30px 0;
}
#index #recommended .block .topBox .left .catch {
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serifl;
font-size: 2.4rem;
font-weight: bold;
line-height: 4.5rem;
letter-spacing: 0.1rem;
}
#index #recommended .block .topBox .left .catch .fs_l {
font-size: 4rem;
background:linear-gradient(transparent 60%, #f8f09a 60%);
}
#index #recommended .block .topBox .right {
width: 440px;
float: right;
}
#index #recommended .block .appArea {
background: url("img/bg_reco_webArea.jpg") 50% 0 no-repeat;
background-size: 100% auto;
border-radius: 10px;
padding: 40px 50px;
margin: 0 auto 70px;
}
#index #recommended .block .appArea .btn-web {
width: 470px;
float: left;
margin: 0;
}
#index #recommended .block .appArea .btn-web a{
font-size: 2rem;
font-weight: bold;
}
#index #recommended .block .appArea .telArea {
width: 270px;
float: right;
font-size: 2.6rem;
font-weight: bold;
background: url("img/icon_idx_tel.png") 0 50% no-repeat;
background-size: 50px auto;
padding: 5px 0 0 60px;
}
#index #recommended .block.sugi .appArea .telArea {
padding: 20px 0 20px 60px;
}
#index #recommended .block .appArea .telArea,
#index #recommended .block .appArea .telArea * {
color: #FFF;
}
#index #recommended .block .appArea .telArea .fs_sma {
display: block;
margin: 3px 0 0 0;
font-size: 1.8rem;
}
#index #recommended .block .subCont {
margin:  0 auto 60px;
}
#index #recommended .block .subCont:last-child {
margin:  0 auto;
}
#index #recommended .block .subCont .idxh4 {
background: #eee;
font-size: 2.4rem;
border: none;
margin: 0 0 40px 0;
padding: 15px 20px 15px 110px;
}
#index #recommended .block .subCont .idxh4:before {
position: absolute;
font-size: 1.5rem;
font-weight: bold;
width: 100px;
height: 30px;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
letter-spacing: 0;
color: #FFF;
background: #951816;
text-align: center;
padding: 5px 25px;
display: inline-block;
top: calc(50% - 15px);
left: -10px;
box-sizing: border-box;
}

#index #recommended .block .subCont .idxh4:after {
content: "";
position: absolute;
top: calc(50% + 15px);
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 6px 0;
border-color: transparent #740907 transparent transparent;
}


#index #recommended .block .subCont#check .idxh4:before {
content: "Check";
}
#index #recommended .block .subCont#needs .idxh4:before {
content: "Needs";
}
#index #recommended .block .subCont#results .idxh4:before {
content: "Results";
}
#index #recommended .block .subCont#information .idxh4:before {
content: "Results";
}
#index #recommended .block .subCont#check .box3 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto 30px;
}
#index #recommended .block .subCont#check .box3 .sBox {
width: calc(100% / 3);
margin: 0;
display: table;
height: 70px;
border-left: 7px solid #ac1d1b;
}
#index #recommended .block .subCont#check .box3 .sBox:last-child {
margin: 0;
}
#index #recommended .block .subCont#check .box3 .sBox .num,
#index #recommended .block .subCont#check .box3 .sBox .mTit {
display: table-cell;
vertical-align: middle;
}
#index #recommended .block .subCont#check .box3 .sBox .num {
font-size: 4.6rem;
color: #aaa;
font-weight: bold;
padding: 0 40px 0 20px;
width: 54px;
box-sizing: border-box;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit {
position: relative;
font-size: 1.7rem;
font-weight: bold;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit .fs_l {
font-size: 2.2rem;
background: none;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit .fs_sma {
font-size: 1.4rem;
background: none;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit:before {
content: "-";
font-size: 3.8rem;
font-weight: bold;
color: #aaa;
position: absolute;
top: calc(50% - 16px);
left: -30px;
}
#index #recommended .block .subCont#check .caption {
text-align: left;
}

#index #recommended .block .subCont#needs {
position: relative;
}
#index #recommended .block .subCont#needs .listArea {
background: #f7e8e8;
padding: 30px;
border-radius: 10px;
width: 630px;
position: relative;
z-index: 2;
}
#index #recommended .block .subCont#needs:after {
content: "";
background: url("img/deco_recommend.png") no-repeat;
background-size: 554px auto;
width: 554px;
height: 396px;
top: 80px;
right: -140px;
position: absolute;
z-index: 1;
}
#index #recommended .companyBox:nth-child(3) .block .subCont#needs:after {
top: 120px;
}
#index #recommended .block .subCont#needs .listArea li {
font-size: 2rem;
font-weight: bold;
padding: 16px 20px 16px 50px;
background: #FFF url("img/listicon02.png") left 20px top 22px no-repeat;
background-size: 16px auto;
margin: 0 0 2px 0;
}
#index #recommended .block .subCont#needs .listArea li:last-child {
margin: 0;
}
#index #recommended .block .subCont .idxh5 {
border-bottom: 2px solid #ddd;
color: #000;
font-size: 1.8rem;
margin: 0 auto 40px;
padding: 0 0 8px 45px;
background: none;
}
#index #recommended .block .subCont .idxh5:before {
content: "";
background: #951816;
width: 30px;
height: 4px;
top: calc(50% - 4px);
left: 0;
position: absolute;
}
#index #recommended .block .subCont#results .listArea {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto 30px;
padding: 0;
}
#index #recommended .block .subCont#results .listArea li {
font-size: 1.6rem;
width: calc((100% - 40px) / 3);
margin: 0 20px 18px 0;
padding: 0 0 0 20px;
background: url("img/listicon02.png") 0 5px no-repeat;
background-size: 12px auto;
line-height: 2.2rem;
}
#index #recommended .block .subCont#results .listArea li:nth-child(3n){
margin: 0 0 18px 0;
}
#index #recommended .block .subCont#results .tglBtn {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
display: block;
color: #FFF;
width: 300px;
margin: 0 auto;
background: #888 url("img/icon_plus.png") right 20px top 50% no-repeat;
background-size: 20px auto;
padding: 15px 30px 15px 15px;
border-radius: 5px;
box-shadow: 0 3px 0 0 #000;
image-rendering: -webkit-optimize-contrast;
}
#index #recommended .block .subCont#results .tglBtn.open {
background: #888 url("img/icon_minus.png") right 20px top 50% no-repeat;
background-size: 20px auto;
image-rendering: -webkit-optimize-contrast;
}
#index #recommended .block .subCont#results .tglBox {
display: none;
padding: 40px 0 0 0;
}

#index #recommended .block .subCont#information table {
margin: 0 auto;
}




/*comList*/
#index #comList {
padding: 0 0 50px 0;
}
#index #comList:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
top: -200px;
right: 0;
background: linear-gradient(to bottom right, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #comList .idxh2 .subTxt {
left: 282px;
}
#index #comList .titArea {
position: relative;
}
#index #comList .titArea:before {
content: "";
position: absolute;
background: url("img/deco05.png") no-repeat;
background-size: 256px auto;
width: 256px;
height: 239px;
bottom: -260px;
left: -200px;
z-index: -1;
}
#index #comList .threeBox {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
z-index: 2;
}
#index #comList .threeBox:after {
content: "";
position: absolute;
background: url("img/deco06.png") no-repeat;
background-size: 245px auto;
width: 245px;
height: 381px;
bottom: -120px;
right: -240px;
z-index: -1;
}
#index #comList .threeBox .sBox {
background: #FFF;
border: 1px solid #0a312e;
width: calc((100% - 40px) / 3);
margin: 0 20px 30px 0;
}
#index #comList .threeBox .sBox:nth-child(3n) {
margin: 0 0 30px 0;
}
#index #comList .threeBox .sBox .idxh3 {
margin: 0;
padding: 0;
border: none;
background: none;
}
#index #comList .threeBox .sBox .idxh3 a {
background: #000 url("img/arr_white.png") right 15px top 50% no-repeat;
background-size: 8px auto;
display: block;
color: #FFF;
font-size: 2rem;
line-height: 3rem;
padding: 20px 30px 20px 20px;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .threeBox .sBox .detail {
padding: 20px 20px 30px 20px;
background: #FFF;
}
#index #comList .threeBox .sBox .detail p {
margin: 0 0 25px 0;
}
#index #comList .threeBox .sBox .detail table {
margin: 0 auto;
}
#index #comList .threeBox .sBox .detail table th {
background: #951816;
font-size: 1.4rem;
width: 33%;
}
#index #comList .threeBox .sBox .detail table td {
background: #eee;
}
#index #comList .threeBox .sBox .detail table th,
#index #comList .threeBox .sBox .detail table td {
border: 1px solid #FFF;
padding: 14px 15px;
}
#index #comList .wi1000 .tglBtn {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
display: block;
color: #FFF;
width: 300px;
margin: 50px auto 0;
background: #888 url(img/icon_plus.png) right 20px top 50% no-repeat;
background-size: 20px auto;
padding: 15px 30px 15px 15px;
border-radius: 5px;
box-shadow: 0 3px 0 0 #000;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .wi1000 .tglBtn.open {
background: #888 url("img/icon_minus.png") right 20px top 50% no-repeat;
background-size: 20px auto;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .wi1000 .tglBox {
margin: 60px auto 0;
display: none;
}

#index .tglBtn:hover {
cursor: pointer;
opacity: 0.8;
}


/*guide*/
#index #guide {
background: url("img/rep01.jpg");
background-size: 1800px auto;
padding: 140px 0 240px 0;
}
#index #guide:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
top: 0px;
right: 0;
background: linear-gradient(to top right, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}

#index #guide .titArea {
width: 420px;
margin: 0 0 50px 0;
}
#index #guide .titArea .en_tit,
#index #guide .titArea .idxh2 {
text-align: left;
}
#index #guide .titArea p {
padding: 0;
}
#index #guide .titArea .en_tit {
background: url("img/icon_tit.png") 0 50% no-repeat;
background-size: 60px auto;
padding: 20px 0 16px 20px;
}
#index #guide .titArea .idxh2 .subTxt {
left: 174px;
}
#index #guide .detail {
margin: -130px auto 0;
}
#index #guide .detail .block {
margin: 0 auto 120px;
}
#index #guide .detail .block:last-child {
margin: 0 auto;
}
#index #guide .detail .block_odd .ph {
width: 520px;
float: right;
box-shadow: -30px 30px 0 0px #ddd;
}
#index #guide .detail .block_even .ph {
width: 520px;
float: left;
box-shadow: 30px 30px 0 0 #ddd;
}
#index #guide .detail .block_odd .txtArea {
width: 620px;
float: left;
}
#index #guide .detail .block_even .txtArea {
width: 620px;
float: right;
}
#index #guide .detail .block .txtArea {
background: rgba(255,255,255,0.9);
padding: 40px;
margin: -220px 0 0 0;
position: relative;
}
#index #guide .detail .block .txtArea:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 130px 90px 0;
border-color: transparent #b42a28 transparent transparent;
}
#index #guide .detail .block .txtArea:after {
font-size: 3rem;
font-weight: bold;
color: #FFF;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
position: absolute;
top: 14px;
right: 10px;
}
#index #guide .detail .block:nth-child(1) .txtArea:after {
content: "01";
}
#index #guide .detail .block:nth-child(2) .txtArea:after {
content: "02";
}
#index #guide .detail .block:nth-child(3) .txtArea:after {
content: "03";
}
#index #guide .detail .block:nth-child(4) .txtArea:after {
content: "04";
}
#index #guide .detail .block:nth-child(5) .txtArea:after {
content: "05";
}





#index #guide .detail .block .txtArea .idxh3 {
margin: 0 0 25px 0;
padding: 0 0 20px 0;
border: none;
background: linear-gradient(to right,
#ddd 0%,/*色の部分*/
#ddd 55%,/*色の部分*/
rgba(0,0,0,0) 40%,/*空白の部分*/
rgba(0,0,0,0) 100%)/*空白の部分*/
repeat-x left bottom/10px 3px;
}
#index #guide .detail .block .txtArea .idxh3 a {
position: relative;
background: none;
display: inline-block;
font-size: 2.4rem;
}
#index #guide .detail .block .txtArea .idxh3 a:after {
content: "";
background: url("img/arr_black.png") no-repeat;
background-size: 8px auto;
display: inline-block;
margin: -5px 0 0 30px;
width: 8px;
height: 14px;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
}
#index #guide .detail .block .txtArea .btn-internal {
width: 180px;
float: right;
margin: 20px 0 0 0;
}
#index #guide .detail .block .txtArea .btn-internal a {
font-size: 1.4rem;
background: #105376 url(img/arr_white.png) right 15px top 50% no-repeat;
background-size: 6px auto;
padding: 10px 24px 10px 15px;
image-rendering: -webkit-optimize-contrast;
}








/*makerList*/
#index #makerList {
padding: 0;
}
#index #makerList:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
top: -200px;
right: 0;
background: linear-gradient(to bottom left, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #makerList .titArea .subTxt {
left: 172px;
}
#index #makerList .threeBox {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
}
#index #makerList .threeBox:before {
content: "";
background: url("img/deco07.png") no-repeat;
background-size: 270px auto;
width: 270px;
height: 298px;
bottom: 30px;
right: 20px;
position: absolute;
z-index: -1;
}
#index #makerList .threeBox .sBox {
background: #FFF;
border: 1px solid #991c1a;
border-top: 6px solid #991c1a;
width: calc((100% - 40px) / 3);
margin: 0 20px 30px 0;
}
#index #makerList .threeBox .sBox:nth-child(3n) {
margin: 0 0 30px 0;
}

#index #makerList .threeBox .sBox .idxh3 {
margin: 0 20px;
padding: 0;
border: none;
background: linear-gradient(to right,
#ddd 0%,/*色の部分*/
#ddd 55%,/*色の部分*/
rgba(0,0,0,0) 40%,/*空白の部分*/
rgba(0,0,0,0) 100%)/*空白の部分*/
repeat-x left bottom/10px 3px;
}
#index #makerList .threeBox .sBox .idxh3 a {
background: url("img/arr_black.png") right 0 top 50% no-repeat;
background-size: 8px auto;
display: block;
font-size: 2rem;
line-height: 3rem;
padding: 18px 30px 18px 0;
}
#index #makerList .threeBox .sBox:nth-child(3n) {
margin: 0 0 32px 0;
}
#index #makerList .threeBox .sBox .detail {
padding: 20px 20px 30px 20px;
}
#index #makerList .threeBox .sBox .detail p {
margin: 0;
}
#index #makerList .threeBox .sBox .detail .add {
background: #f9ecec;
padding: 20px 20px 15px 20px;
margin: 25px 0 0 0;
}
#index #makerList .threeBox .sBox .detail .add p {
margin: 0;
font-size: 1.4rem;
line-height: 2.6rem;
}
#index #makerList .threeBox .sBox .detail .add .sTit {
width: 90px;
text-align: center;
color: #FFF;
margin:  -30px 0 5px 5px;
padding: 5px 20px;
line-height: 1;
position: relative;
}
#index #makerList .threeBox .sBox .detail .add .sTit:before {
content: "";
position: absolute;
background: #b42a28;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
transform: skewX(-25deg);
}
#index #makerList .threeBox .sBox .detail .add .sTit span {
background: none;
font-size: 1.4rem;
font-weight: bold;
line-height: 1;
z-index: 2;
position: relative;
}



/*basic_knowledge*/
#index #basic_knowledge {
background: url("img/rep01.jpg") 50% 0;
background-size: 1800px auto;
padding: 200px 0 20% 0;
}
#index #basic_knowledge:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 200px;
top: 0;
right: 0;
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #basic_knowledge:after {
content: "";
position: absolute;
background: url("img/deco08.png") no-repeat;
background-size: 461 auto;
width: 461px;
height: 367px;
top: 0;
left: calc(50% - 730px);
z-index: 1;
}
#index #basic_knowledge .detail .idxh3 {
border: none;
border-left: 6px solid #b42a28;
padding: 0 0 3px 20px;
line-height: 2.5rem;
margin: 0 0 25px 0;
background: none;
}
#index #basic_knowledge .detail .idxh3 a {
display: inline-block;
background: none;
font-size: 2.4rem;
padding: 0;
}
#index #basic_knowledge .detail .idxh3 a span {
font-size: 2.4rem;
}
#index #basic_knowledge .detail .idxh3 a:after {
content: "";
background: url(img/arr_black.png) no-repeat;
background-size: 8px auto;
display: inline-block;
margin: -5px 0 0 30px;
width: 8px;
height: 14px;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
}
#index #basic_knowledge .detail{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
border-bottom: 1px solid #000;
}
#index #basic_knowledge .detail .sBox {
width: calc(100% / 2);
border-top: 1px solid #000;
padding: 40px 40px 100px 40px;
position: relative;
}
#index #basic_knowledge .detail .sBox:first-child {
width: 100%;
}
#index #basic_knowledge .detail .sBox:nth-child(2n) {
border-right: 1px solid #000;
}
#index #basic_knowledge .detail .sBox .btn-internal {
margin: 0;
width: 180px;
position: absolute;
bottom: 40px;
right: 40px;
}
#index #basic_knowledge .detail .sBox .btn-internal a {
font-size: 1.4rem;
background: #105376 url(img/arr_white.png) right 15px top 50% no-repeat;
background-size: 6px auto;
padding: 10px 24px 10px 15px;
image-rendering: -webkit-optimize-contrast;
}

#index #basic_knowledge .detail .sBox:before {
position: absolute;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
letter-spacing: -0.3rem;
font-size: 90px;
line-height: 90px;
font-weight: bold;
color: #FFF;
top: -6px;
right: 0;
}
#index #basic_knowledge .detail .sBox:nth-child(1):before {
content: "01";
}
#index #basic_knowledge .detail .sBox:nth-child(2):before {
content: "02";
}
#index #basic_knowledge .detail .sBox:nth-child(3):before {
content: "03";
}
#index #basic_knowledge .detail .sBox:nth-child(4):before {
content: "04";
}
#index #basic_knowledge .detail .sBox:nth-child(5):before {
content: "05";
}




/*pr*/
#index #pr {
background: url("img/bg_pr.png") 50% 0 no-repeat;
background-size: cover;
padding: 260px 0 100px;
margin: -15% auto 0;
}
#index #pr .wi1000 {
background: rgba(255,255,255,0.9);
padding: 10px;
}
#index #pr .titArea {
border: 1px solid #951816;
padding: 40px 40px 70px 40px;
margin: 0;
}
#index #pr .titArea .idxh2 {
border: none;
margin: 0 0 30px 0;
padding: 0;
}
#index #pr .titArea .idxh2:before,
#index #pr .titArea .idxh2:after {
display: none;
}
#index #pr .btn-internal {
width: 360px;
margin: 40px auto 0;
}
#index #pr .btn-internal a {
background: #105376 url("img/arr_white.png") right 20px top 50% no-repeat;
background-size: 8px auto;
}





@media screen and (max-width: 599px) {

p {
font-size: 16px;
font-size: 1.6rem;
margin: 0 0 10px 0;
}
.wi1100 {
width: 100%;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}






#keyArea {
background: url("img/key_sp.png") 50% 0 no-repeat;
background-size: 100% 100%;
padding-bottom: 130px;
margin-bottom: inherit;
}


#keyArea .wi1000 {
padding: 20px 0 0 0;
}
#keyArea .logo {
width: 88px;
margin: 0 auto 20px;
float: none;
}
#keyArea .logo img {
image-rendering: -webkit-optimize-contrast;
}

#keyArea .right {
width: 100%;
padding: 0 15px;
float: none;
}
#keyArea .right * {
color: #FFF;
}

#keyArea .mainTit {
font-size: 2.3rem;
font-weight: 600;
line-height: 3.6rem;
margin: 0 0 20px 0;
position: relative;
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
text-align: center;
}
#keyArea .mainTit span {
font-size: 2.3rem;
font-weight: 600;
color: #ff6866;
}
#keyArea .lead {
margin: 0 0 30px 0;
line-height: 1.8em;
}
#keyArea .btn_anc {
width: 80%;
margin: 0 auto;
position: relative;
}
#keyArea .btn_anc a {
background: #105376 url("img/arr_white_down.png") right 15px top 50% no-repeat;
background-size: 5% auto;
padding: 10px 20px 10px 10px;
display: block;
text-align: center;
font-size: 1.4rem;
image-rendering: -webkit-optimize-contrast;
line-height: 2.4rem;
}






/*共通*/

#index {
}
#contents .captionWrap {
overflow: hidden;
white-space: nowrap;
}
#contents .captionWrap .caption {
overflow-x: scroll;
/*height: calc(100% + 18px);*/
}

#index .titArea {
margin: 0 auto 30px;
}
#index .titArea p {
padding: 0;
margin: 0;
}
#index .titArea .en_tit {
background: url("img/icon_tit.png") 50% 50% no-repeat;
background-size: 40px auto;
font-size: 1rem;
color: #951816;
font-weight: bold;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
text-align: center;
padding: 10px 0 8px 0;
margin: 0 0 15px 0;
}
#index .idxh2 {
color: #000;
text-align: center;
font-size: 2.2rem;
line-height: 3rem;
margin: 0 0 20px 0;
padding: 0;
position: relative;
background: none;
line-height: 3.2rem;
}

#index .idxh2 a {
position: relative;
line-height: 3.2rem;
}

/* Firefox */
@-moz-document url-prefix(){
}


#index .idxh2 a:after {
content: "";
position: absolute;
top: calc(50% - 4px);
right: 0;
background: url("img/arr_black.png") no-repeat;
background-size: 10px auto;
width: 10px;
height: 16px;
margin: 0 0 0 12px;
padding: 0;
}
#index .idxh2 .subTxt {
font-size: 0.9rem;
top: -10px;
line-height: 1.2rem;
}

/* Firefox */
@-moz-document url-prefix(){
}


#index .idxh2 .fc_red {
font-size: 2.2rem;
color: #951816;
}




/*各セクション*/

#contents.topPage {
position: relative;
top: -40px;
margin-bottom: -40px;
}


/*check_point*/
#index #check_point {
padding: 0 15px 40px 15px;
}
#index #check_point .wi1000 {
position: relative;
}
#index #check_point .wi1000:before {
display: none;
}
#index #check_point:after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
bottom: -60px;
right: 0;
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #check_point .titArea {
width: inherit;
margin: 0 0 40px 0;
}
#index #check_point .titArea .en_tit,
#index #check_point .titArea .idxh2 {
text-align: left;
}
#index #check_point .titArea .en_tit {
background: url("img/icon_tit.png") 0 50% no-repeat;
background-size: 40px auto;
padding: 10px 0 8px 20px;
}
#index #check_point .box3 {
display: block;
position: relative;
z-index: 2;
}
#index #check_point .box3 .sBox {
position: relative;
border: 1px solid #951816;
padding: 20px;
width: 100%;
margin: 0 auto 15px;
background: #FFF;
}
#index #check_point .box3 .sBox:before {
content: "";
background: #951816;
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 60px;
}
#index #check_point .box3 .sBox:last-child {
margin: 0;
}
#index #check_point .box3 .sBox .idxh3 {
position: relative;
font-size: 1.8rem;
line-height: 2.4rem;
margin: 0 0 15px 0;
padding: 4px 20px 20px 0;
border: none;
border-bottom: 2px solid #951816;
}
#index #check_point .box3 .sBox .idxh3:before {
content: "";
background: #951816;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: -20px;
transform: rotate(45deg);
}
#index #check_point .box3 .sBox .idxh3:after {
color: #FFF;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-size: 2rem;
position: absolute;
top: -11px;
right: -11px;
}
#index #check_point .box3 .sBox:nth-child(1) .idxh3:after {
content: "01";
}
#index #check_point .box3 .sBox:nth-child(2) .idxh3:after {
content: "02";
}
#index #check_point .box3 .sBox:nth-child(3) .idxh3:after {
content: "03";
}





/*recommended*/
#index #recommended {
padding: 80px 0 0 0;
background: #f7f7f7;
}
#index #recommended .titArea {
position: relative;
padding: 0 15px;
}
#index #recommended .titArea:before {
display: none;
}
#index #recommended .titArea .idxh2 .fs_sma {
font-size: 1.8rem;
}
#index #recommended .companyBox_odd {
padding: 0 15px 100px 15px;
}
#index #recommended .companyBox_even {
padding: 50px 15px 100px 15px;
background: #eaeaea;
position: relative;
}
#index #recommended .companyBox_even:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
top: -60px;
right: 0;
background: linear-gradient(to bottom left, rgba(0,0,0,0) 50%, #eaeaea 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}


#index #recommended .companyBox_even .block:after {
content: "";
position: absolute;
background: url("img/deco03.png") no-repeat;
background-size: 224px auto;
width: 224px;
height: 543px;
top: -540px;
left: -260px;
z-index: 2;
}

#index #recommended .companyBox_even .block:before {
content: "";
position: absolute;
background: url("img/deco04.png") no-repeat;
background-size: 180px auto;
width: 180px;
height: 150px;
top: -135px;
right: -80px;
z-index: 2;
image-rendering: -webkit-optimize-contrast;
}

#index #recommended .companyBox_odd,
#index #recommended .companyBox_even {
position: relative;
z-index: 1;
}
#index #recommended .block {
border: 1px solid #951816;
background: #FFF;
position: relative;
}





#index #recommended .block .idxh3 {
background: #951816;
color: #FFF;
text-align: center;
border: none;
font-size: 2.3rem;
position: relative;
padding: 15px 30px;
margin: 0;
line-height: 3.6rem;
}
#index #recommended .block .idxh3:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 70px 0 0;
border-color: #ac1d1b transparent transparent transparent;
}
#index #recommended .block .idxh3:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 40px 70px;
border-color: transparent transparent #ac1d1b transparent;
}
#index #recommended .block .detail_inner {
padding: 30px 15px;
position: relative;
}
#index #recommended .block .detail_inner:before {
content: "";
position: absolute;
top: 0;
left: calc(50% - 25px);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 25px 0 25px;
border-color: #951816 transparent transparent transparent;
}

#index #recommended .block .topBox {
margin: 0 0 40px 0;
}
#index #recommended .block .topBox .left {
width: 100%;
float: none;
margin: 0 auto 30px;
}
#index #recommended .block .topBox .mTit {
font-size: 1.7rem;
font-weight: bold;
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serifl;
border-top: 2px solid #951816;
border-bottom: 2px solid #951816;
padding: 10px 0 10px 40px;
background: url("img/tit_arr.png") 0 50% no-repeat;
background-size: 25px auto;
margin: 0 0 15px 0;
image-rendering: -webkit-optimize-contrast;
}
#index #recommended .block .topBox .left .catch {
font-family: 'Noto Sans JP', 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Open Sans', Arial, Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serifl;
font-size: 1.6rem;
font-weight: bold;
line-height: 3rem;
letter-spacing: 0.1rem;
}
#index #recommended .block .topBox .left .catch .fs_l {
font-size: 2rem;
background:linear-gradient(transparent 60%, #f8f09a 60%);
}
#index #recommended .block .topBox .right {
width: 100%;
float: none;
}
#index #recommended .block .appArea {
background: url("img/bg_reco_webArea_sp.jpg") 50% 0 no-repeat;
background-size: cover;
border-radius: 5px;
padding: 30px 15px;
margin: 0 auto 40px;
}
#index #recommended .block .appArea .btn-web {
width: 100%;
float: none;
margin: 0 auto 20px;
}
#index #recommended .block .appArea .btn-web a{
font-size: 1.5rem;
font-weight: bold;
}
#index #recommended .block .appArea .telArea {
width: 100%;
float: none;
font-size: 2.6rem;
font-weight: bold;
background: url("img/icon_idx_tel.png") 0 50% no-repeat;
background-size: 50px auto;
padding: 5px 0 0 60px;
}
#index #recommended .block .appArea .telArea,
#index #recommended .block .appArea .telArea * {
color: #FFF;
}
#index #recommended .block .appArea .telArea .fs_sma {
display: block;
margin: 3px 0 0 0;
font-size: 1.8rem;
}
#index #recommended .block .appArea .btn-tel {
width: 100%;
margin: 0 auto;
}
#index #recommended .block .appArea .btn-tel a {
font-size: 1.5rem;
line-height: 2.2rem;
}
#index #recommended .block .appArea .btn-tel a .fs_sma {
font-size: 1.3rem;
}
#index #recommended .block .subCont {
margin:  0 auto 40px;
}
#index #recommended .block .subCont:last-child {
margin:  0 auto;
}
#index #recommended .block .subCont .idxh4 {
background: #eee;
font-size: 1.8rem;
border: none;
margin: 0 0 20px 0;
padding: 20px 15px;
}
#index #recommended .block .subCont .idxh4:before {
position: absolute;
font-size: 0.9rem;
line-height: 1rem;
font-weight: bold;
width: 80px;
height: 20px;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
letter-spacing: 0;
color: #FFF;
background: #951816;
text-align: center;
padding: 5px 25px;
display: inline-block;
top: -10px;
left: -10px;
box-sizing: border-box;
}

#index #recommended .block .subCont .idxh4:after {
content: "";
position: absolute;
top: 10px;
left: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 6px 0;
border-color: transparent #740907 transparent transparent;
}


#index #recommended .block .subCont#check .idxh4:before {
content: "Check";
}
#index #recommended .block .subCont#needs .idxh4:before {
content: "Needs";
}
#index #recommended .block .subCont#results .idxh4:before {
content: "Results";
}
#index #recommended .block .subCont#information .idxh4:before {
content: "Results";
}
#index #recommended .block .subCont#check .box3 {
display: block;
margin: 0 auto 30px;
}
#index #recommended .block .subCont#check .box3 .sBox {
width: 100%;
margin: 0 auto 15px;
display: table;
height: inherit;
border-left: 4px solid #ac1d1b;
}
#index #recommended .block .subCont#check .box3 .sBox:last-child {
margin: 0;
}
#index #recommended .block .subCont#check .box3 .sBox .num,
#index #recommended .block .subCont#check .box3 .sBox .mTit {
display: table-cell;
vertical-align: middle;
}
#index #recommended .block .subCont#check .box3 .sBox .num {
font-size: 3.5rem;
color: #aaa;
font-weight: bold;
padding: 0 40px 0 10px;
width: 54px;
box-sizing: border-box;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit {
position: relative;
font-size: 1.7rem;
font-weight: bold;
line-height: 2.5rem;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit .fs_l {
font-size: 1.8rem;
background: none;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit .fs_sma {
font-size: 1.4rem;
background: none;
}
#index #recommended .block .subCont#check .box3 .sBox .mTit:before {
content: "-";
font-size: 3.8rem;
font-weight: bold;
color: #aaa;
position: absolute;
top: calc(50% - 16px);
left: -30px;
}
#index #recommended .block .subCont#needs:after {
display: none;
}
#index #recommended .block .subCont#needs .listArea {
background: #f7e8e8;
padding: 15px;
border-radius: 5px;
width: 100%;
position: relative;
}
#index #recommended .block .subCont#needs .listArea:after {
display: none;
}
#index #recommended .block .subCont#needs .listArea li {
font-size: 1.6rem;
font-weight: bold;
padding: 10px 15px 10px 40px;
background: #FFF url("img/listicon02.png") left 15px top 15px no-repeat;
background-size: 14px auto;
margin: 0 0 2px 0;
line-height: 2.4rem;
}
#index #recommended .block .subCont#needs .listArea li:last-child {
margin: 0;
}
#index #recommended .block .subCont .idxh5 {
border-bottom: 2px solid #ddd;
color: #000;
font-size: 1.6rem;
margin: 0 auto 20px;
padding: 0 0 5px 30px;
background: none;
}
#index #recommended .block .subCont .idxh5:before {
content: "";
background: #951816;
width: 20px;
height: 2px;
top: calc(50% - 1px);
left: 0;
position: absolute;
}
#index #recommended .block .subCont#results .listArea {
display: block;
margin: 0 auto 30px;
padding: 0;
}
#index #recommended .block .subCont#results .listArea li {
font-size: 1.6rem;
width: 100%;
margin: 0 0 8px 0;
padding: 0 0 0 20px;
background: url("img/listicon02.png") 0 5px no-repeat;
background-size: 12px auto;
line-height: 2.2rem;
}
#index #recommended .block .subCont#results .listArea li:nth-child(3n){
margin: 0 0 8px 0;
}
#index #recommended .block .subCont#results .tglBtn {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
display: block;
color: #FFF;
width: 90%;
margin: 0 auto;
background: #888 url("img/icon_plus.png") right 15px top 50% no-repeat;
background-size: 15px auto;
padding: 10px 20px 10px 15px;
border-radius: 5px;
box-shadow: 0 3px 0 0 #000;
image-rendering: -webkit-optimize-contrast;
}
#index #recommended .block .subCont#results .tglBtn.open {
background: #888 url("img/icon_minus.png") right 15px top 50% no-repeat;
background-size: 15px auto;
image-rendering: -webkit-optimize-contrast;
}
#index #recommended .block .subCont#results .tglBox {
display: none;
padding: 40px 0 0 0;
}

#index #recommended .block .subCont#information table {
margin: 0 auto;
}
#index #recommended .block .subCont#information table th {
width: 34%;
}




/*comList*/
#index #comList {
padding: 0 15px 50px 15px;
}
#index #comList:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
top: -60px;
right: 0;
background: linear-gradient(to bottom right, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #comList .idxh2 .subTxt {
left: 166px;
top: -1rem;
}
#index #comList .titArea {
position: relative;
}
#index #comList .titArea:before {
display: none;
}
#index #comList .threeBox {
display: block;
position: relative;
z-index: 2;
}
#index #comList .threeBox:after {
display: none;
}
#index #comList .threeBox .sBox {
width: 100%;
margin: 0 auto 15px;
}
#index #comList .threeBox .sBox:nth-child(3n) {
margin: 0 auto 15px;
}
#index #comList .threeBox .sBox:last-child{
margin: 0 auto;
}
#index #comList .threeBox .sBox .idxh3 {
margin: 0;
padding: 0;
border: none;
}
#index #comList .threeBox .sBox .idxh3 a {
background: #000 url("img/arr_white.png") right 15px top 50% no-repeat;
background-size: 3% auto;
display: block;
color: #FFF;
font-size: 1.8rem;
line-height: 2.5rem;
padding: 15px 30px 20px 15px;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .threeBox .sBox .detail {
padding: 20px 15px 20px 15px;
background: #FFF;
}
#index #comList .threeBox .sBox .detail p {
margin: 0 0 20px 0;
}
#index #comList .threeBox .sBox .detail table {
margin: 0 auto;
}
#index #comList .threeBox .sBox .detail table th {
background: #951816;
font-size: 1.4rem;
width: 34%;
}
#index #comList .threeBox .sBox .detail table td {
background: #eee;
}
#index #comList .threeBox .sBox .detail table th,
#index #comList .threeBox .sBox .detail table td {
border: 1px solid #FFF;
padding: 10px 10px;
}
#index #comList .wi1000 .tglBtn {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
display: block;
color: #FFF;
width: 90%;
margin: 30px auto 0;
background: #888 url(img/icon_plus.png) right 15px top 50% no-repeat;
background-size: 15px auto;
padding: 10px 20px 10px 15px;
border-radius: 5px;
box-shadow: 0 3px 0 0 #000;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .wi1000 .tglBtn.open {
background: #888 url("img/icon_minus.png") right 15px top 50% no-repeat;
background-size: 15px auto;
image-rendering: -webkit-optimize-contrast;
}
#index #comList .wi1000 .tglBox {
margin: 40px auto 0;
display: none;
}

#index .tglBtn:hover {
cursor: pointer;
opacity: 0.8;
}


/*guide*/
#index #guide {
background: url("img/rep01.jpg");
background-size: 1800px auto;
padding: 60px 15px 100px 15px;
}
#index #guide:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
top: 0px;
right: 0;
background: linear-gradient(to top right, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}

#index #guide .titArea {
width: 100%;
margin: 0 0 50px 0;
}
#index #guide .titArea .en_tit,
#index #guide .titArea .idxh2 {
text-align: left;
}
#index #guide .titArea p {
padding: 0;
}
#index #guide .titArea .en_tit {
background: url("img/icon_tit.png") 0 50% no-repeat;
background-size: 40px auto;
padding: 10px 0 8px 20px;
}
#index #guide .titArea .idxh2 .subTxt {
left: 92px;
top: -1rem;
}
#index #guide .detail {
margin: 0 auto;
}
#index #guide .detail .block {
margin: 0 auto 60px;
}
#index #guide .detail .block:last-child {
margin: 0 auto;
}
#index #guide .detail .block_odd .ph {
margin: 0 auto;
width: 90%;
float: none;
box-shadow: -15px 15px 0 0px #ddd;
}
#index #guide .detail .block_even .ph {
margin: 0 auto;
width: 90%;
float: none;
box-shadow: 15px 15px 0 0 #ddd;
}
#index #guide .detail .block_odd .txtArea {
margin: -20px 0 0 8%;
width: 90%;
float: none;
}
#index #guide .detail .block_even .txtArea {
margin: -20px 8% 0 0;
width: 90%;
float: none;
}
#index #guide .detail .block .txtArea {
background: rgba(255,255,255,0.9);
padding: 20px 15px;
position: relative;
}
#index #guide .detail .block .txtArea:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 65px 45px 0;
border-color: transparent #b42a28 transparent transparent;
}
#index #guide .detail .block .txtArea:after {
font-size: 1.8rem;
font-weight: bold;
color: #FFF;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
position: absolute;
top: 2px;
right: 5px;
}
#index #guide .detail .block:nth-child(1) .txtArea:after {
content: "01";
}
#index #guide .detail .block:nth-child(2) .txtArea:after {
content: "02";
}
#index #guide .detail .block:nth-child(3) .txtArea:after {
content: "03";
}
#index #guide .detail .block:nth-child(4) .txtArea:after {
content: "04";
}
#index #guide .detail .block:nth-child(5) .txtArea:after {
content: "05";
}





#index #guide .detail .block .txtArea .idxh3 {
margin: 0 0 15px 0;
padding: 0 0 15px 0;
border: none;
background: linear-gradient(to right,
#ddd 0%,/*色の部分*/
#ddd 55%,/*色の部分*/
rgba(0,0,0,0) 40%,/*空白の部分*/
rgba(0,0,0,0) 100%)/*空白の部分*/
repeat-x left bottom/10px 3px;
}
#index #guide .detail .block .txtArea .idxh3 a {
position: relative;
background: none;
display: inline-block;
font-size: 1.8rem;
}
#index #guide .detail .block .txtArea .idxh3 a:after {
content: "";
background: url("img/arr_black.png") no-repeat;
background-size: 8px auto;
display: inline-block;
margin: -5px 0 0 20px;
width: 8px;
height: 13px;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
}
#index #guide .detail .block .txtArea .btn-internal {
width: 90%;
float: none;
margin: 20px auto;
}
#index #guide .detail .block .txtArea .btn-internal a {
font-size: 1.4rem;
background: #105376 url(img/arr_white.png) right 15px top 50% no-repeat;
background-size: 8px auto;
padding: 10px 24px 10px 15px;
image-rendering: -webkit-optimize-contrast;
}








/*makerList*/
#index #makerList {
padding: 0 15px 50px 15px;
}
#index #makerList:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
top: -60px;
right: 0;
background: linear-gradient(to bottom left, rgba(0,0,0,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #makerList .titArea .subTxt {
left: 94px;
top: -1rem;
}
#index #makerList .threeBox {
display: block;
position: relative;
}
#index #makerList .threeBox:before {
display: none;
}
/*#index #makerList .threeBox:before {
content: "";
background: url("img/deco07.png") no-repeat;
background-size: 135px auto;
width: 135px;
height: 194px;
bottom: 30px;
right: 20px;
position: absolute;
z-index: -1;
}*/
#index #makerList .threeBox .sBox {
border-top: 6px solid #991c1a;
width: 100%;
margin: 0 auto 15px;
}
#index #makerList .threeBox .sBox:nth-child(3n) {
margin: 0 auto 15px;
}
#index #makerList .threeBox .sBox:last-child {
margin: 0 auto;
}

#index #makerList .threeBox .sBox .idxh3 {
margin: 0 15px;
padding: 0;
border: none;
background: linear-gradient(to right,
#ddd 0%,/*色の部分*/
#ddd 55%,/*色の部分*/
rgba(0,0,0,0) 40%,/*空白の部分*/
rgba(0,0,0,0) 100%)/*空白の部分*/
repeat-x left bottom/10px 3px;
}
#index #makerList .threeBox .sBox .idxh3 a {
background: url("img/arr_black.png") right 0 top 50% no-repeat;
background-size: 8px auto;
display: block;
font-size: 1.8rem;
line-height: 2.4rem;
padding: 18px 10px 18px 0;
}
#index #makerList .threeBox .sBox .detail {
padding: 20px 15px 20px 15px;
}
#index #makerList .threeBox .sBox .detail p {
margin: 0;
}
#index #makerList .threeBox .sBox .detail .add {
background: #f9ecec;
padding: 20px 20px 15px 20px;
margin: 25px 0 0 0;
}
#index #makerList .threeBox .sBox .detail .add p {
margin: 0;
font-size: 1.4rem;
line-height: 2.6rem;
}
#index #makerList .threeBox .sBox .detail .add .sTit {
width: 90px;
text-align: center;
color: #FFF;
margin:  -30px 0 5px 5px;
padding: 5px 20px;
line-height: 1;
position: relative;
}
#index #makerList .threeBox .sBox .detail .add .sTit:before {
content: "";
position: absolute;
background: #b42a28;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
transform: skewX(-25deg);
}
#index #makerList .threeBox .sBox .detail .add .sTit span {
background: none;
font-size: 1.4rem;
font-weight: bold;
line-height: 1;
z-index: 2;
position: relative;
}



/*basic_knowledge*/
#index #basic_knowledge {
background: url("img/rep01.jpg") 50% 0;
background-size: 1800px auto;
padding: 70px 15px 38% 15px;
}
#index #basic_knowledge:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 60px;
top: 0;
right: 0;
background: linear-gradient(to top left, rgba(255,255,255,0) 50%, #FFF 50.5%) no-repeat top right/100% 100%;
z-index: 1;
}
#index #basic_knowledge:after {
content: "";
position: absolute;
background: url("img/deco08.png") no-repeat;
background-size: 180px auto;
width: 180px;
height: 145px;
top: -20px;
left: calc(50% - 250px);
z-index: 1;
image-rendering: -webkit-optimize-contrast;
}
#index #basic_knowledge .detail .idxh3 {
border: none;
border-left: 6px solid #b42a28;
padding: 0 0 0 20px;
line-height: 2.5rem;
margin: 0 0 15px 0;
background: none;
}
#index #basic_knowledge .detail .idxh3 a {
display: inline-block;
background: none;
font-size: 1.8rem;
padding: 0;
}
#index #basic_knowledge .detail .idxh3 a span {
font-size: 1.8rem;
}
#index #basic_knowledge .detail .idxh3 a:after {
content: "";
background: url(img/arr_black.png) no-repeat;
background-size: 8px auto;
display: inline-block;
margin: 0 0 0 20px;
width: 8px;
height: 13px;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
}
#index #basic_knowledge .detail{
display: block;
position: relative;
border-bottom: 1px solid #000;
}
#index #basic_knowledge .detail .sBox {
width: 100%;
margin: 0 auto;
border-top: 1px solid #000;
padding: 20px 0 30px 0;
position: relative;
}
#index #basic_knowledge .detail .sBox:first-child {
width: 100%;
}
#index #basic_knowledge .detail .sBox:nth-child(2n) {
border-right: none;
}
#index #basic_knowledge .detail .sBox .btn-internal {
position: inherit;
bottom: inherit;
right: inherit;
margin: 20px auto 0;
float: none;
width: 80%;
}
#index #basic_knowledge .detail .sBox .btn-internal a {
font-size: 1.4rem;
background: #105376 url(img/arr_white.png) right 15px top 50% no-repeat;
background-size: 8px auto;
padding: 10px 24px 10px 15px;
image-rendering: -webkit-optimize-contrast;
}

#index #basic_knowledge .detail .sBox:before {
position: absolute;
font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
letter-spacing: -0.2rem;
font-size: 50px;
line-height: 46px;
font-weight: bold;
color: #FFF;
top: -2px;
right: 0;
}
#index #basic_knowledge .detail .sBox:nth-child(1):before {
content: "01";
}
#index #basic_knowledge .detail .sBox:nth-child(2):before {
content: "02";
}
#index #basic_knowledge .detail .sBox:nth-child(3):before {
content: "03";
}
#index #basic_knowledge .detail .sBox:nth-child(4):before {
content: "04";
}
#index #basic_knowledge .detail .sBox:nth-child(5):before {
content: "05";
}




/*pr*/
#index #pr {
background: url("img/bg_pr.png") 50% 0 no-repeat;
background-size: cover;
padding: 190px 15px 60px 15px;
margin: -38% auto 0;
}
#index #pr .wi1000 {
background: rgba(255,255,255,0.9);
padding: 5px;
}
#index #pr .titArea {
border: 1px solid #951816;
padding: 20px 15px 35px 15px;
margin: 0;
}
#index #pr .titArea .idxh2 {
border: none;
margin: 0 0 30px 0;
padding: 0;
}
#index #pr .titArea .idxh2:before,
#index #pr .titArea .idxh2:after {
display: none;
}
#index #pr .btn-internal {
width: 80%;
margin: 30px auto 0;
}
#index #pr .btn-internal a {
background: #105376 url("img/arr_white.png") right 13px top 50% no-repeat;
background-size: 8px auto;
}




/* トップバナー非表示 */
#fixBn img {
display: none;
}




















}