@charset "UTF-8";

/*	proposal_section
------------------------------------------------------------ */
.proposal_section { background-color: #eeeeee; padding: 70px 0 80px 0; }
@media only screen and (max-width:767px){
.proposal_section { background-color: #eeeeee; padding: 35px 0 40px 0; }
}

/*	proposal_lead
------------------------------------------------------------ */
.proposal_lead { font-size: 125%; text-align: center; margin-top: 15px; }
@media only screen and (max-width:767px){
.proposal_lead { font-size: 100%; margin-top: 35px; }
}

/*	proposal_photos
------------------------------------------------------------ */
.proposal_photos { overflow: hidden; }
.proposal_photos ul { display: flex; flex-wrap: wrap; margin: -10px -5px 0 -5px; }
.proposal_photos ul li { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 100%; line-height: 0; padding: 10px 5px 0 5px; width: 50%; }
.proposal_photos ul li small { display: block; font-size: 112.5%; font-weight: 700; line-height: 1.4; text-align: center; margin-bottom: 15px; }
.proposal_photos ul li span { font-size: 100%; display: block; position: relative; }
.proposal_photos ul li span::after { background-color: #15aca3; color: #ffffff; display: block; font-weight: 700; line-height: 1.8181; text-align: center; position: absolute; top: 0px; left: 0px; width: 5em; }
.proposal_photos ul li span.before::after { content: "Before"; }
.proposal_photos ul li span.after::after { content: "After"; }
@media (min-width:768px){
.proposal_photos ul li span::after { font-size: 150%; }
}
@media only screen and (max-width:767px){
.proposal_photos ul { display: block; margin: 0; }
.proposal_photos ul li { padding: 0; width: auto; }
.proposal_photos ul li:nth-of-type(n+2) { margin-top: 10px; }
.proposal_photos ul li small { font-size: 100%; margin-bottom: 5px; }
.proposal_photos ul li:nth-of-type(n+2) small { padding-top: 5px; }
.proposal_photos ul li span::after { font-size: 118.75%; }
}

/*	proposal_point
------------------------------------------------------------ */
.proposal_point { -webkit-border-radius: 10px; border-radius: 10px; background-color: #ffffff; }
.proposal_point dl { display: flex; align-items: center; padding: 20px; }
.proposal_point dl dt { width: 120px; }
.proposal_point dl dd { flex: 1; font-size: 150%; padding-left: 25px; }
.proposal_point dl dd li { position: relative; padding-left: 20px; }
.proposal_point dl dd li::before { -webkit-border-radius: 50%; border-radius: 50%; background-color: #000000; content: ""; position: absolute; top: calc(0.94em - 8px); left: 0px; width: 16px; height: 16px; }
.proposal_point dl dd li sup { font-size: 63.1578%; }
.proposal_point dl dd li small { display: block; font-size: 66.6666%; }
@media only screen and (max-width:767px){
.proposal_point dl { display: block; position: relative; padding: 10px 20px 10px 80px; }
.proposal_point dl dt { position: absolute; top: -15px; left: -10px; width: 80px; }
.proposal_point dl dd { flex: initial; font-size: 118.75%; padding-left: 0; }
.proposal_point dl dd li { position: relative; padding-left: 17px; }
.proposal_point dl dd li + li { margin-top: 5px; }
.proposal_point dl dd li::before { top: calc(0.8em - 6px); width: 12px; height: 12px; }
.proposal_point dl dd li small { font-size: 73.6842%; }
}

/*	proposal_home
------------------------------------------------------------ */
.proposal_home { position: relative; }
.proposal_home .home_btn { background-repeat: no-repeat; background-size: cover; cursor: pointer; font-size: 0; line-height: 0; position: absolute; z-index: +1; } /* 1200 961 */
.proposal_home .home_btn > img { width: 100%; }
.proposal_home .home_btn > img:nth-of-type(1) { opacity: 1; }
.proposal_home .home_btn > img:nth-of-type(2) { position: absolute; top: 0px; left: 0px; z-index: -1; }

/* calcの都合上pxを%と記載 */
.proposal_home .home_btn.btn_01 { left: calc(170% / 1200 * 100); top: calc(31% / 961 * 100); width: calc(266% / 1200 * 100); }
.proposal_home .home_btn.btn_02 { left: calc(447% / 1200 * 100); top: calc(31% / 961 * 100); width: calc(343% / 1200 * 100); }
.proposal_home .home_btn.btn_03 { left: calc(798% / 1200 * 100); top: calc(31% / 961 * 100); width: calc(312% / 1200 * 100); }
.proposal_home .home_btn.btn_04 { right: 0px; top: calc(401% / 961 * 100); width: calc(338% / 1200 * 100); }
.proposal_home .home_btn.btn_05 { left: 0px; top: calc(261% / 961 * 100); width: calc(310% / 1200 * 100); }
.proposal_home .home_btn.btn_06 { left: 0px; top: calc(584% / 961 * 100); width: calc(358% / 1200 * 100); }
.proposal_home .home_btn.btn_07 { right: 0px; top: calc(674% / 961 * 100); width: calc(370% / 1200 * 100); }
.proposal_home .home_btn.btn_08 { left: calc(520% / 1200 * 100); top: calc(444% / 961 * 100); width: calc(280% / 1200 * 100); }
@media only screen and (min-width:768px){
.proposal_home .home_btn > img:nth-of-type(1) { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.proposal_home .home_btn:hover > img:nth-of-type(1) { opacity: 0; }
}
@media only screen and (max-width:767px){
}

/*	proposal_pinch
------------------------------------------------------------ */
.proposal_pinch { display: none; }
@media only screen and (max-width:767px){
.proposal_pinch { display: flex; align-items: center; justify-content: center; }
.proposal_pinch dt { font-size: 0; line-height: 0; margin-right: 10px; width: 30px; }
.proposal_pinch dd { font-size: 87.5%; }
}

/*	proposal_solution
------------------------------------------------------------ */
.proposal_solution { text-align: center; margin-top: 70px; }
.proposal_solution a { color: #000000; display: inline-block; vertical-align: top; }
.proposal_solution a dt { font-size: 0; line-height: 0; }
.proposal_solution a dt img { width: 490px; }
.proposal_solution a dd { display: flex; align-items: center; justify-content: center; font-size: 112.5%; line-height: 1.2; margin-top: 15px; }
.proposal_solution a dd img { margin-left: 5px; width: 19px; height: 16px; }
@media only screen and (min-width:768px){
.proposal_solution a dt { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.proposal_solution a:hover dt { opacity: 0.7; }
}
@media only screen and (max-width:767px){
.proposal_solution { margin-top: 35px; }
.proposal_solution a dt img { width: 245px; }
.proposal_solution a dd { font-size: 87.5%; margin-top: 7px; }
.proposal_solution a dd img { margin-left: 5px; width: 15px; height: 12px; }
}

/*	proposal_movie
------------------------------------------------------------ */
.proposal_movie { font-size: 0; line-height: 0; text-align: center; }
.proposal_movie > span { cursor: pointer; display: inline-block; vertical-align: top; position: relative; width: 100%; max-width: 814px; }
.proposal_movie > span span { -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); display: block; position: absolute; top: 50%; left: 50%; width: 14.1277%; }
.proposal_movie img { width: 100%; }
@media only screen and (min-width:768px){
.proposal_movie > span { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.proposal_movie > span:hover { opacity: 0.7; }
}
@media only screen and (max-width:767px){
.proposal_movie > span { display: block; max-width: none; }
}

/*	modal
------------------------------------------------------------ */
html.modal_fixed { overflow: auto; }
html.modal_fixed body { overflow: hidden; }
.modal_items { display: none; }
.modal_bg { background-color: rgba(0,0,0,0.8); display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 200; }
.modal_window { background-color: #ffffff; display: none; position: absolute; width: calc(100% - 26px); max-width: 1200px; z-index: 210; }
.modal_close { text-align: right; }
.modal_close span { background-color: #000000; cursor: pointer; display: inline-block; font-size: 0; line-height: 0; vertical-align: top; padding: 30px; }
.modal_close span img { width: 20px; height: 20px; }
.modal_link { background-color: #4794d3; }
.modal_link a { color: #fff; display: block; text-align: center; position: relative; padding: 3.3333%; }
.modal_link a dl { display: inline-flex; align-items: center; vertical-align: top; }
.modal_link a dl dt { font-size: 0; line-height: 0; margin-right: 20px; }
.modal_link a dl dt img { width: 70px; height: 70px; }
.modal_link a dl dd { flex: 1 1 auto; color: #fff; font-size: 150%; line-height: 1.4; text-align: left; }
.modal_link a dl dd span { background: url(/business/vod/common/img/arw_link_01.png) right center no-repeat; background-size: 8px 13px; display: inline-block; padding-right: 28px; }
.modal_contents { line-height: 1.4; text-align: left; padding: 0 5% 4.1666% 5%; }
.modal_contents .title { font-size: 225%; font-weight: 700; margin-top: -30px; }
.modal_contents .text { margin-top: 20px; }
.modal_contents .text dt { font-size: 125%; font-weight: 700; }
.modal_contents .text dd { margin-top: 10px; }
.modal_contents .photo { font-size: 0; line-height: 0; position: relative; margin-top: 40px; padding-bottom: 55.5555%; }
.modal_contents .photo img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.modal_contents .iframe { font-size: 0; line-height: 0; position: relative; margin-top: 40px; padding-bottom: 56.25%; }
.modal_contents .iframe video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.modal_contents .link { text-align: right; margin-top: 15px; }
.modal_contents .link a { background: url(/chovicon/common/img/arw_link_02.png) right center no-repeat; background-size: 8px 13px; color: #00524d; display: inline-block; vertical-align: top; font-size: 150%; line-height: 1.4; padding-right: 25px; }
@media only screen and (min-width:768px){
.modal_close span { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.modal_close span:hover { opacity: 0.7; }
.modal_contents .photo a { -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.modal_contents .photo a:hover { opacity: 0.7; }
}
@media only screen and (max-width:767px){
.modal_window { left: 17px !important; width: calc(100% - 34px); max-width: none; }
.modal_close span { padding: 19px; }
.modal_close span img { width: 13px; height: 13px; }
.modal_link { display: block; padding: 10px 15px; }
.modal_link a { padding: 10px 0; width: auto; }
.modal_link a dl dt { margin-right: 10px; }
.modal_link a dl dt img { width: 50px; height: 50px; }
.modal_link a dl dd { font-size: 100%; }
.modal_link a dl dd span { background: url(/chovicon/common/img/arw_link_01.png) right 0.3875em no-repeat; background-size: 6px 10px; display: block; padding: 0 10px 0 0; }
.modal_contents { padding: 0 15px 20px 15px }
.modal_contents .title { font-size: 156.25%; margin-top: -30px; padding-right: 60px; }
.modal_contents .text { margin-top: 15px; }
.modal_contents .text dd { margin-top: 10px; }
.modal_contents .photo { margin-top: 15px; }
.modal_contents .iframe { margin-top: 15px; }
.modal_contents .link { margin-top: 10px; }
.modal_contents .link a { background: url(/chovicon/common/img/arw_link_02.png) right center no-repeat; background-size: 6px 10px; font-size: 100%; padding-right: 10px; }
}