/*!
 * 
 * 一時追加調整用
 * 
 */

.head_internal {
    background: no-repeat;
    background-size: auto 100%;
    background-position: center;
    background-image: url(../img_2022/bg_jumbotron.svg),linear-gradient(90deg, #005b97 0%, #0075be 18.23%, #1e9cd7 44.83%, #cce0f4 100%);
}
.head_internal div {
    max-width: 1100px;
    height: 240px;
	margin: 0 auto;
	padding: 0 40px;
    position: relative;
}
.head_internal h1 {
    font-size: 38px;
    color: #FFF;
    line-height: 1.2;
    position: absolute;
    top: 49%;
    left: 0;
    transform: translate( 0, -50%);
}
.head_internal h1 span {
    display: block;
    margin: 0 0 6px;
    font-size: 22px;
    color: #FFF500;
}
.pc_show { display: block;}
.sp_show { display: none;}

@media screen and ( max-width: 768px ) {
    .head_internal div {
        max-width: unset;
        height: auto;
        min-height: 120px;
        padding: 0 20px;
    }
    .head_internal h1 {
        padding: 0 20px;
        font-size: 26px;
        position: absolute;
        top: 50%;
        left: 0;
    }

    .jirei .head_internal div {
        padding: 20px;
    }
    .jirei .head_internal h1 {
        padding: 0;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
    }

    .head_internal h1 span {
        font-size: 14px;
    }
    .pc_show { display: none;}
    .sp_show { display: block;}
}


/* 会社案内
---------------------------------------------------------------- */

body.company .message {
    max-width: 1100px;
	margin: 0 auto;
    padding: 90px 20px 100px;
    text-align: center;
    position: relative;
}
body.company .message::before {
    content: '';
    display: block;
    width: 400px;
    height: 234px;
    background: url("../img_2022/company/mark.svg") no-repeat;
    position: absolute;
    top: 50%;
    right: -100px;
    transform: translate( 0, -50%);
}

body.company .contents_box {
    max-width: 1100px;
	margin: 0 auto 80px;
	padding: 0 30px;
}
body.company #acces_box.contents_box {
	margin-bottom: 120px;
}

body.company .contents_box > div {
	display: flex;
}
body.company .contents_box > div > div:nth-child(1) {
	width: 210px;
}
body.company .contents_box > div > div:nth-child(2) {
	width: calc( 100% - 210px );
}

body.company .contents_box .box_title {
	font-size: 28px;
}
body.company .contents_box .box_title .sub {
    display: block;
	font-size: 16px;
	color: #FF6010;
    line-height: 1;
}

body.company .contents_box .data_area dl {
	display: flex;
	padding: 0;
}

body.company .contents_box .data_area dl dt,
body.company .contents_box .data_area dl dd {
	display: flex;
	align-items: center;
	line-height: 1.6;
	border-width: 1px;
	border-bottom-style: solid;
}

body.company .contents_box .data_area dl:first-child dt,
body.company .contents_box .data_area dl:first-child dd {
	border-top-style: solid;
}

body.company .contents_box .data_area dl dt .inner,
body.company .contents_box .data_area dl dd .inner {
	padding: 18px 20px;
	box-sizing: border-box;
	width: 100%;
}

body.company .contents_box .data_area dl dt {
	flex: 0 0 auto;
	width: 180px;
	display: flex;
	align-items: center;
	border-color: #7AA8DB;
}

body.company .contents_box .data_area dl dd {
	flex: 1 1 auto;
	border-color: #7AA8DB;
}

body.company #acces_box .map_area {
    margin: 0 0 30px;
}
body.company #acces_box .map_area iframe {
	display: block;
}

body.company #acces_box .data_area dl:first-child dt,
body.company #acces_box .data_area dl:first-child dd {
	border-top-style: none;
}

body.company #acces_box .data_area dl dt .before_icon {
	display: flex;
	align-items: center;
}

body.company #acces_box .data_area dl dt .before_icon::before {
	content: "";
	display: block;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
}

body.company #acces_box .data_area dl dt .before_icon.map_pin::before {
	width: 18px;
	height: 27px;
	background-image: url("../img_2022/company/icon_map_pin.svg");
}

body.company #acces_box .data_area dl dt .before_icon.train::before {
	width: 20px;
	height: 26px;
	background-image: url("../img_2022/company/icon_train.svg");
}

body.company #acces_box .data_area dl dd .train_access_texts {
	display: flex;
	flex-wrap: wrap;
}
body.company #acces_box .data_area dl dd .train_access_texts .text:nth-of-type(2n+1) {
	flex-basis: 46%;
}
body.company #acces_box .data_area dl dd .train_access_texts .text .min {
	color: #FF6010;
	font-size: 24px;
	margin: 0 4px;
}

#company_box .mark_hyogo {
	width: 120px;
    margin: 40px 0 0;
}
#company_box .mark_hyogo img {
	max-width: 100%;
}

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

    body.company .message {
        max-width: unset;
        margin: 0 auto;
        padding: 40px 15px 60px;
    }
    body.company .message::before {
        width: 260px;
        height: 152px;
        background-size: cover;
        position: absolute;
        top: 45%;
        right: 0;
    }

	body.company .contents_box {
        max-width: unset;
        margin: 0 auto 60px;
        padding: 0 15px;
	}
    body.company #acces_box.contents_box {
        margin-bottom: 80px;
    }

    body.company .contents_box > div {
        display: block;
    }
    body.company .contents_box > div > div:nth-child(1) {
        width: 100%;
    }
    body.company .contents_box > div > div:nth-child(2) {
        width: 100%;
    }

    body.company .contents_box .box_title {
        margin: 0 0 20px;
        font-size: 24px;
    }
    body.company .contents_box .box_title .sub {
        font-size: 16px;
    }

	body.company .contents_box .data_area dl {
		flex-direction: column;
	}

	body.company .contents_box .data_area dl dt {
		width: auto;
		margin-right: 0;
		border-bottom-style: none;
		border-top-style: solid;
		font-size: 14px;
	}

	body.company .contents_box .data_area dl dt .inner {
		padding: 15px 10px 0;
	}

	body.company .contents_box .data_area dl dd {
		border-top-style: none;
		border-bottom-style: none;
	}

	body.company .contents_box .data_area dl:first-child dd {
		border-top-style: none;
	}

	body.company .contents_box .data_area dl:last-child dd {
		border-bottom-style: solid;
	}

	body.company .contents_box .data_area dl dd .inner {
		padding: 3px 10px 15px;
	}

	body.company #acces_box .map_area iframe {
		height: 300px;
	}

	body.company #acces_box .data_area dl:first-child dt {
		border-top-style: solid;
	}

	body.company #acces_box .data_area dl dt .inner {
		padding: 20px 10px 0;
	}

	body.company #acces_box .data_area dl dt .before_icon::before {
		margin-right: 8px;
	}

	body.company #acces_box .data_area dl dt .before_icon.map_pin::before {
		width: 17px;
		height: 26px;
	}

	body.company #acces_box .data_area dl dt .before_icon.train::before {
		width: 18px;
		height: 24px;
	}

	body.company #acces_box .data_area dl dd .inner {
		padding: 10px 10px 20px;
	}

	body.company #acces_box .data_area dl dd .train_access_texts {
		display: block;
	}

	body.company #acces_box .data_area dl dd .train_access_texts .text {
		margin-bottom: 6px;
		line-height: 1.15;
	}

	body.company #acces_box .data_area dl dd .train_access_texts .text:last-child {
		margin-bottom: 0;
	}

	body.company #acces_box .data_area dl dd .train_access_texts .text::before {
		width: 19.2px;
		height: 27px;
		margin-right: 6px;
	}

	body.company #acces_box .data_area dl dd .train_access_texts .text .min {
		font-size: 25px;
	}
	
	#company_box {
		position: relative;
	}
	#company_box .mark_hyogo {
		width: 66px;
        margin: 0;
        position: absolute;
        top: -10px;
        right: 30px;
	}

}


/* セキュリティへの取り組み
---------------------------------------------------------------- */

body.security .lead_area {
    padding: 60px 0;
    font-size: 1.8rem;
    text-align: center;
}

.torikumi_area.bg_blue {
    background: #EDF5FB;
}
.torikumi_area.last {
    margin: 0 0 120px;
}

.torikumi_area .d-flex {
    display: flex;
    align-items: center;
    max-width: 1060px;
    margin: 0 auto;
    padding: 80px 20px;
}

.torikumi_area .d-flex.right-col {
    flex-direction: row-reverse;
}

.torikumi_area .d-flex .text {
    width: calc( 100% - 240px );
    padding: 0 0 0 100px;
    z-index: 1;
}
.torikumi_area .d-flex.right-col .text {
    padding: 0 100px 0 0;
}
.torikumi_area .d-flex .text .title {
    margin: 0 0 30px;
    font-size: 3.2rem;
    font-weight: bold;
}
.torikumi_area .d-flex .text .title span {
    display: block;
    line-height: 1;
    font-size: 1.8rem;
    color: #FF6010;
}
.torikumi_area .d-flex .text .small_text {
    margin: 15px 0 0;
    font-size: 1.4rem;
}

.torikumi_area .d-flex .icon {
    width: 240px;
    z-index: 1;
}

.torikumi_area .d-flex {
    position: relative;
}
.torikumi_area.box_01 .d-flex::before {
    content: 'Safety';
    font-family: "FOT-スーラ ProN DB";
    font-size: 13.8rem;
    font-weight: bold;
    color: #F7FBFD;
    line-height: 1;
    position: absolute;
    top: 0;
    left: -100px;
}
.torikumi_area.box_02 .d-flex::before {
    content: 'Security';
    font-family: "FOT-スーラ ProN DB";
    font-size: 13.8rem;
    font-weight: bold;
    color: #F4F9FC;
    line-height: 1;
    position: absolute;
    top: 0;
    right: -100px;
}
.torikumi_area.box_03 .d-flex::before {
    content: 'Data center';
    font-family: "FOT-スーラ ProN DB";
    font-size: 13.8rem;
    font-weight: bold;
    color: #F7FBFD;
    line-height: 1;
    position: absolute;
    top: 0;
    left: -100px;
}

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

    body.security .lead_area {
        padding: 30px 15px;
        font-size: 1.6rem;
    }

    .torikumi_area.last {
        margin: 0 0 80px;
    }

    .torikumi_area .d-flex {
        display: block;
        max-width: unset;
        padding: 60px 20px;
    }

    .torikumi_area .d-flex .text {
        width: 100%;
        padding: 0;
    }
    .torikumi_area .d-flex.right-col .text {
        padding: 0;
    }
    .torikumi_area .d-flex .text .title {
        margin: 0 0 20px;
        font-size: 2.3rem;
    }
    .torikumi_area .d-flex .text .title span {
        font-size: 1.4rem;
    }
    .torikumi_area .d-flex .text .small_text {
        font-size: 1.2rem;
    }

    .torikumi_area .d-flex .icon {
        width: 140px;
        margin: 0 auto 30px;
    }

    .torikumi_area.box_01 .d-flex::before {
        font-size: 5.6rem;
        position: absolute;
        top: 0;
        left: 0;
    }
    .torikumi_area.box_02 .d-flex::before {
        font-size: 5.6rem;
        position: absolute;
        top: 0;
        right: unset;
        left: 0;
    }
    .torikumi_area.box_03 .d-flex::before {
        font-size: 5.6rem;
        position: absolute;
        top: 0;
        left: 0;
    }
}


/* セキュリティー・ポリシー
---------------------------------------------------------------- */

.security_policy {
	max-width: 1100px;
	margin: 60px auto 120px;
	padding: 0 20px;
}
.security_policy ol {
    padding-left: 1.25em;
}
.security_policy ol li {
    list-style: auto;
	margin: 20px 0;
	padding-left: 6px;
}
.security_policy .name {
	text-align: right;
}

@media screen and ( max-width: 768px ) {
	.security_policy {
		max-width: unset;
		margin: 40px auto 60px;
	}
}


/* 活用事例
---------------------------------------------------------------- */

.jirei_contents {
    max-width: 1120px;
    margin: 60px auto 120px;
    padding: 0 10px;
}

.jirei_contents h2 {
    margin: 60px 0 40px;
    padding:  15px 10px 15px 24px;
    font-family: "FOT-スーラ ProN DB";
    line-height: 1.4;
    border-bottom: solid 1px #7AA8DB;
    position: relative;
}
.jirei_contents h2::before {
    content: '';
    display: block;
    width: 8px;
    height: 24px;
    font-size: 2.4rem;
    border-radius: 4px;
    background: #FF6010;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate( 0, -50%);
}

.jirei_contents p {
    margin: 30px 0;
    line-height: 2;
}
.jirei_contents p + img {
    margin: 60px 0 0;
}

.jirei_contents strong {
    font-family: "FOT-スーラ ProN DB";
    font-size: 2.2rem;
    font-weight: bold;
    color: #0071BC;
}

.jirei_contents .btn_area {
    margin: 60px 0 0;
    text-align: center;
}

.jirei_contents ol {
    padding-left: 1.25em;
}
.jirei_contents ol li {
    list-style: auto;
    margin: 15px 0;
    font-size: 1.8rem;
}

.jirei_contents .link_underline {
    text-decoration: underline;
}
.jirei_contents .link_underline:hover {
    text-decoration: none;
    opacity: .7;
}

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

    .jirei_contents {
        max-width: unset;
        margin: 40px auto 60px;
        padding: 0 20px;
    }

    .jirei_contents h2 {
        margin: 30px 0;
        padding:  10px 10px 10px 24px;
        font-size: 2.0rem;
    }

    .jirei_contents p { line-height: 1.8;}
    .jirei_contents p + img { margin: 30px 0 0;}

    .jirei_contents strong { font-size: 2.0rem;}

    .jirei_contents .btn_area { margin: 40px 0 0;}

}


/* お問い合わせ
------------------------------------------------------------ */

body.contact #form_box {
	padding: 0 0 120px;
}

body.contact #form_box .mail_sended_message {
    max-width: 800px;
    margin: 60px auto;
	padding: 20px 0;
    color: #d10000;
	font-size: 1.8rem;
	text-align: center;
	border-radius: 5px;
	background-color: #ffebeb;
}

body.contact #form_box .form_header {
	margin: 60px 0 40px;
	font-size: 1.8rem;
	text-align: center;
}

body.contact #form_box .form_wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 30px 60px 50px;
    background: #EDF5FB;
}

body.contact #form_box .require_message {
    margin: 0 0 10px;
    font-size: 1.4rem;
    color: #F00;
    text-align: right;
}

body.contact #form_box .form_body .field {
    display: flex;
	margin-bottom: 30px;
}

body.contact #form_box .form_body .field:last-child {
	margin-bottom: 0;
}

body.contact #form_box .recaptcha_wrapper { margin: 30px 0 0 200px;}

body.contact #form_box .form_footer { margin-top: 40px; text-align: center; }

.contact_comp_text { margin: 60px 0; text-align: center;}
.contact_comp_text a { color: #FF6010; text-decoration: underline;}
.contact_comp_text a:hover { color: #E59065; text-decoration: none;}

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

	body.contact #form_box {
        padding: 0 0 40px;
	}

	body.contact #form_box .mail_sended_message {
		margin-bottom: 30px;
	}

	body.contact #form_box .form_header {
		font-size: 16px;
		margin: 30px 0;
	}

    body.contact #form_box .form_wrap {
        max-width: unset;
        padding: 10px 20px 40px;
    }

    body.contact #form_box .form_body .field {
        display: block;
        margin-bottom: 20px;
    }

    body.contact #form_box .recaptcha_wrapper { margin: 20px 0 0;}

	body.contact #form_box .form_footer { margin-top: 30px; }

}


/* basic_form
------------------------------------------------------------ */

.basic_form .field .field_head { width: 200px; padding: 14px 0 0; position: relative;}
.basic_form .field .field_head .require { color: #F00; font-weight: bold;}
.basic_form .field[data-validation-state="valid"] .field_head::after {
	content: ""; display: block; width: 26px; height: 26px;
	background-image: url("../img_2022/icon_valid.svg"); background-repeat: no-repeat; background-position: 0 0; background-size: contain;
	position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
}
.basic_form .field .interface { width: calc( 100% - 200px );}
.basic_form .field .interface.text input { width: 100%; margin: 0; padding: 11px 15px; border-radius: 5px; font-size: 18px; }
.basic_form .field .interface.select select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	width: 100%; margin: 0; padding: 15px 15px;
	border: 1px solid #CCC; border-radius: 5px; font-size: 18px;
	background-image: url(../img_2022/select_arrow.svg); background-repeat: no-repeat; background-position: calc(100% - 12px) center;
}
.basic_form .field .interface.textarea textarea {
	box-sizing: border-box; width: 100%; min-height: 160px; margin: 0; padding: 11px 15px; resize: vertical;
	border-radius: 5px; font-size: 18px;
}
.basic_form .field .interface.text input,
.basic_form .field .interface.select select,
.basic_form .field .interface.textarea textarea { background-color: #FFF !important; }
.basic_form .field[data-validation-state="valid"] .interface.text input,
.basic_form .field[data-validation-state="valid"]  .interface.select select,
.basic_form .field[data-validation-state="valid"]  .interface.textarea textarea { background-color: #FFF !important; }
.basic_form .field[data-validation-state="error"] .interface.text input,
.basic_form .field[data-validation-state="error"]  .interface.select select,
.basic_form .field[data-validation-state="error"]  .interface.textarea textarea,
.basic_form .field[data-validation-state="error"]  .interface.radio { background-color: #FFE5E0 !important; }
.basic_form .field .error_message,
.basic_form .recaptcha_wrapper .error_message { padding-left: 15px; margin-top: 3px; color: #C8321D; font-size: 16px; }
.basic_form .field:not([data-validation-state="error"]) .error_message { display: none; }
.basic_form .form_button { width: 400px; height: 80px; padding: 0; line-height: 80px; font-size: 2.8rem;}
.basic_form .form_button:disabled { opacity: 0.4; }

.basic_form .field .interface.radio { padding: 12px 15px; border: solid 1px #CCC; border-radius: 5px;}
.basic_form .field .radio-input { display: none;}
.basic_form .field .radio-parts { display: inline-block; padding: 0 10px 0 30px; position: relative;}
.basic_form .field .radio-parts::before {
	content: ""; display: block; width: 20px; height: 20px;
	background: url("../img/radio_off.svg"); background-size: 20px 20px;
	position: absolute; top: 50%; left: 0; transform: translate( 0, -50%);
}
.basic_form .field .radio-input:checked + .radio-parts {}
.basic_form .field .radio-input:checked + .radio-parts::after {
	content: ""; display: block; width: 20px; height: 20px;
	background: url("../img/radio_on.svg"); background-size: 20px 20px;
	position: absolute; top: 50%; left: 0; transform: translate( 0, -50%);
}

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

    .basic_form .field .field_head { width: auto; margin: 0 0 10px; padding: 0;}

    .basic_form .field .interface { width: auto;}

    .basic_form .form_button { width: 90%; height: 60px; line-height: 60px; font-size: 2.0rem;}

}


/* インスタントLIVE
------------------------------------------------------------ */

h2.style01 { margin: 0 0 32px; font-size: 38px; line-height: 1; text-align: center; position: relative;}
h2.style01::after {
	content: ''; display: block; width: 90px; height: 6px; margin-left: -45px; background: #FF5F11;
	position: absolute; bottom: -32px; left: 50%;
}
h2.style01 span.subtitle { display: block; margin: 0 0 18px; font-size: 22px; color: #FF5F11;}

.flex_box { display: -webkit-box; display: -ms-flexbox; display: flex;}
.flex_box_sp { display: -webkit-box; display: -ms-flexbox; display: flex;}
.flex_wrap { -ms-flex-wrap: wrap; flex-wrap: wrap;}

.bg_orange { background: #FFF7EB;}

.intro_instantlive { margin: 70px 0; line-height: 2; font-size: 2.4rem; font-weight: bold; text-align: center;}
.intro_instantlive .style01 {
    margin: 0 4px 0 0; padding: 0 0 8px; color: #0071BC;
    background: url("../img_2022/line01.svg") repeat-x; background-position: left bottom;
}
.intro_instantlive .style02 {
    margin: 0 4px; padding: 0 0 8px; color: #D70211;
    background: url("../img_2022/line02.svg") repeat-x; background-position: left bottom;
}

.feature_list_box { padding: 80px 0 70px;}
.feature_list_box .btn_area { max-width: 800px; margin: 0 auto; text-align: center;}
.feature_list_box .btn_area a { display: block; margin: auto; transition: transform .2s;}
.feature_list_box .btn_area a:hover { transform: scale(1.05);}

.dxtab_feature_list { max-width: 1160px; margin: 110px auto 0; padding: 0; text-align: center;}
.dxtab_feature_list > div {
	width: 280px; min-height: 185px; margin: 0 5px 45px; border: solid 1px #FFDC96; border-radius: 10px;
	background: #FFF; box-sizing: border-box;
}
.dxtab_feature_list .image { margin-top: -25px;}
.dxtab_feature_list .title { margin: 0 0 5px; font-size: 19px; font-weight: bold;}
.dxtab_feature_list .text { padding: 0 20px; font-size: 1.4rem; line-height: 1.4; text-align: left;}

.contents_service { padding: 100px 0 70px;}
.contents_service .btn_area { max-width: 800px; margin: 60px auto 0; text-align: center;}
.contents_service .btn_area a { display: block; margin: auto; transition: transform .2s;}
.contents_service .btn_area a:hover { transform: scale(1.05);}

.instantlive_service_lead_area { margin: 0 0 60px; text-align: center;}
.instantlive_service_lead_area p { display: inline-block; color: #0071BC; font-size: 32px; font-weight: bold; position: relative;}
.instantlive_service_lead_area p span {
    margin: 0 4px; padding: 0 0 8px; color: #D70211;
    background: url("../img_2022/line02.svg") repeat-x; background-position: left bottom;
}

.instantlive_service { max-width: 1120px; margin: 0 auto;}
.instantlive_service > div { margin: 40px 0 0;}

.instantlive_service .text {
    width: 660px; min-height: 360px; border-radius: 15px; border: solid 1px #C0D4EA;
    background: #F7FBFF; box-sizing: border-box;
}
.instantlive_service .text .title { padding: 0 0 20px; color: #0071BC; font-size: 32px; font-weight: bold;}
.instantlive_service .text .title span { padding: 0 10px 12px 0; background: url("../img_2022/line01.svg") repeat-x; background-position: left bottom;}
.instantlive_service .text .subtext { padding: 0 0 30px;}
.instantlive_service .text .check { margin: 15px 0 0;}
.instantlive_service .text .check p {
	padding: 0 0 12px 28px; color: #0071BC; font-size: 18px; font-weight: bold;
	background: url("../img_2022/check_01.svg") no-repeat; background-size: 20px 20px; background-position: 0 6px;
}

.instantlive_service .image { width: 500px; margin: 25px 0 0;}
.instantlive_service .image img { max-width: 100%;}

.instantlive_service .box03 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.instantlive_service .box03 .text { margin-left: -40px; padding: 45px 20px 20px 90px;}
.instantlive_service .box02 .text { margin-right: -40px; padding: 45px 20px 20px 60px;}

.contents_movie { margin: 0 0 120px; padding: 80px 0;}

.movie_wrap { width: 920px; margin: 80px auto 0; position: relative;}
.movie_wrap img { max-width: 100%;}
.movie_wrap .fukidashi { position: absolute; top: -60px; right: -60px;}

.movies_wrap { justify-content: center; margin: 110px auto 20px;}
.movies_wrap > div { width: 525px; position: relative;}
.movies_wrap > div:first-child { margin-right: 50px;}
.movies_wrap img { max-width: 100%;}
.movies_wrap p { margin: 15px 0 0; font-size: 28px; text-align: center;}
.movies_wrap p span { padding-left: 46px; background: url("../img_2022/carshop_icon_14.svg") no-repeat; background-position: 0 2px;}
.movies_wrap a:hover { opacity: 0.7; cursor: pointer;}
.movies_wrap .fukidashi { position: absolute; top: -60px; right: -20px;}

.youtube_wrap { max-width: 100%; height: auto; padding-bottom: 56.25%; position: relative; overflow: hidden;}
.youtube_wrap iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

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

    h2.style01 { margin: 0 0 30px; font-size: 30px; line-height: 1.2;}
    h2.style01::after { display: block; width: 60px; height: 4px; margin-left: -30px; position: absolute; bottom: -20px; left: 50%;}
    h2.style01 span.subtitle { margin: 0 0 8px; font-size: 18px;}

    .intro_instantlive { margin: 10px 10px 35px; line-height: 1.8; font-size: 2.0rem;}
    .intro_instantlive .style01,
    .intro_instantlive .style02 { padding: 0 0 5px;}

    .feature_list_box { padding: 40px 0;}
    .feature_list_box .btn_area { max-width: unset; margin: 0 10px;}

    .dxtab_feature_list { width: 100%; margin: 80px auto 0; padding: 0 5px; box-sizing: border-box;}
    .dxtab_feature_list > div { width: calc( 50% - 10px); min-height: auto; margin: 0 5px 40px;}
    .dxtab_feature_list .image { margin-top: -25px;}
    .dxtab_feature_list .image img { max-width: 100%;}
    .dxtab_feature_list .title { margin: 5px 0 10px; padding: 0 10px; font-size: 16px;}
    .dxtab_feature_list .text { padding: 0 10px 15px; font-size: 14px;}

    .contents_service { padding: 40px 0;}

	.instantlive_service_lead_area { margin: 0 0 30px;}
	.instantlive_service_lead_area p { padding: 0; font-size: 24px;}
	.instantlive_service_lead_area p::before,
	.instantlive_service_lead_area p::after { display: none;}

	.instantlive_service { width: 100%; padding: 0 15px; box-sizing: border-box;}
	.instantlive_service > div { display: block; margin: 30px 0 0;}

	.instantlive_service .text { width: 100%; min-height: auto;}
	.instantlive_service .text .title { padding: 0 0 20px; font-size: 24px;}
	.instantlive_service .text .title span { padding: 0 0 6px;}
	.instantlive_service .text .title b { margin-left: 10px; font-size: 14px;}
	.instantlive_service .text .subtext { padding: 0 0 20px;}
	.instantlive_service .text .check { margin: 15px 0 0;}
	.instantlive_service .text .check p { padding: 0 0 10px 28px;}

	.instantlive_service .image { width: 100%; margin: -35px 0 0;}

	.instantlive_service .box01 .text,
	.instantlive_service .box03 .text { margin-left: 0; padding: 20px 20px 50px; border-radius: 10px 10px 0 0;}
	.instantlive_service .box02 .text { margin-right: 0; padding: 20px 20px 50px; border-radius: 10px 10px 0 0;}
    
    
    .contents_movie { margin: 0 0 60px; padding: 40px 0;}

    .movie_wrap { width: 88%; margin: 60px auto 0;}
    .movie_wrap .fukidashi { width: 100px; height: 100px; position: absolute; top: -40px; right: -20px;}

    .movies_wrap { display: block; width: 88%; margin: 60px auto 0;}
    .movies_wrap > div { width: 100%;}
    .movies_wrap > div:first-child { margin-right: 0; margin-bottom: 40px;}
    .movies_wrap p { margin: 5px 0 0; font-size: 20px;}
    .movies_wrap p span { display: inline-block; padding: 3px 0 3px 36px; background-size: 28px 20px; background-position: left center;}
    .movies_wrap .fukidashi { width: 100px; height: 100px; position: absolute; top: -40px; right: -20px;}

}


/* modal
------------------------------------------------------------ */

.modal_bg {
	display: none; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.6);
	position: fixed; top: 0; left: 0; z-index: 6666;
}

.modal_box {
	display: none; width: 940px; /*border-radius: 10px; background: #FFF;*/
	position: fixed; z-index: 7777;
}
.modal_box .title { padding: 45px 0 15px; line-height: 1; color: #024A90; font-size: 36px; text-align: center; position: relative;}
.modal_box .title span { padding: 0 0 10px; background: url("../img/line_04.svg") repeat-x; background-position: left bottom;}
.modal_box .title a { position: absolute; top: -30px; right: -30px;}
.modal_box .title a:hover img { opacity: 0.9;}
.modal_box .body { padding: 30px 40px;}
.modal_box .body .field { width: 360px; padding: 15px 0 0;}
.modal_box .body .recaptcha_wrapper { padding: 20px 0 0;}
.modal_box .body .field .field_head { font-size: 18px;}
.modal_box .body .field[data-validation-state="valid"] .field_head::after { right: 5px; }
.modal_box .body .field .interface.text input { padding: 15px; font-size: 16px;}
.modal_box .body .field .error_message,
.modal_box .body .recaptcha_wrapper .error_message { padding: 0 5px;}
.modal_box .body .btn_area { margin-top: 30px; text-align: center; }

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

	.modal_box { width: 94%;}
	.modal_box .title { padding: 25px 0 10px; font-size: 20px;}
	.modal_box .title a { position: absolute; top: -20px; right: -10px;}
	.modal_box .title a img { width: 40px; height: auto;}
	.modal_box .body { padding: 15px 10px 20px;}
	.modal_box .body .field { width: 100%; padding: 10px 0 0;}
	.modal_box .body .recaptcha_wrapper { padding: 15px 0 0;}
	.modal_box .body .field .field_head { margin-bottom: 5px; font-size: 16px;}
	.modal_box .body .field[data-validation-state="valid"] .field_head::after { width: 22px; height: 22px; }
	.modal_box .body .field .interface.text input { padding: 6px 10px; font-size: 16px;}
	.modal_box .body .field .error_message,
	.modal_box .body .recaptcha_wrapper .error_message { font-size: 14px; }

	.modal_box .body .btn_area { margin-top: 20px;}
	.modal_box .body .btn_area .form_button { width: 84%;}

}