@charset "UTF-8";

/* ===================================
	File Name   : modal.css
	Description : Each parts settings
	
	Update Description :
	[2024/03/01] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Modal Window (Work)
		- icon
		- font
		- box
		- backgraund image
		- Schedule bar
		- flex
		- Other Departments
		- next/prev buttom
	2. Modal Window (Work Style)
	3. Modal Window (Video Style)
 
====================================== */

/*===== ■1. Modal Window (Work) =====*/
.modal_win {
    position: fixed; 
    display: none;
    inset: 0;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    z-index: 2;
}
.modal_win.active_cont {
    display: block;
    opacity: 1;
}
.modal_contents {
    width: 1192px;
    margin: 120px auto 0;
    height: 100%;
}
.modal_section {
    position: relative;
    padding: 100px 0 50px;
    border-radius: 10px;
    background-color: #fff;
}
.modal_win > .modal_close {
    position: absolute;
    top: 150px;
    right: calc(50% - 570px);
    width: 60px;
    height: 60px;
    color: #fff;
    background: #636262;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.modal_win > .modal_close::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    content: "";
}
.modal_win > .modal_close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    content: "";
}

.modal_section .outline,
.modal_section .detail {
    width: 100%;
    padding: 0 80px;
    min-width: 1192px;
}

.modal_section .framsp {
   	padding: 0;
    background-color: #fff;
}
.modal_section .framsp .detail {
	background-color: #fff;
    padding: 0 80px;
}
.modal_section .outline {
    position: relative;
}

@media only screen and (max-width: 1392px){
	.modal_contents {
		margin: 120px 24px 0 24px;
		width: calc(100% - 48px);
	}
    .modal_win > .modal_close {
        top: 150px;
        right: 50px;
        width: 60px;
        height: 60px;
    }
    .modal_section .outline,
    .modal_section .detail {
        min-width: auto;
    }
}

@media only screen and (max-width: 750px) {
    .modal_contents {
        margin: 120px 20px 0 20px;
    }
    .modal_section {
        padding: 50px 0;
    }
    .modal_section .outline, 
    .modal_section .detail {
        padding: 0 20px;
    }
	.modal_section .detail.pd00sp {
        padding: 0;
        border-bottom: 1px solid;
    }
	.modal_section .framsp {
   		padding: 20px 0 0;
    	background-color: rgba(0, 0, 0, 0.7);
    }
	.modal_section .framsp .detail {
		background-color: #fff;
    	padding: 50px 20px;
    	border-radius: 20px 20px 0 0;
    }
    .modal_win > .modal_close {
        top: 100px;
        right: 10px;
        width: 50px;
        height: 50px;
    }
    .modal_win > .modal_close::before {
        width: 15px;
    }
    .modal_win > .modal_close::after {
        width: 15px;
    }
}

/* icon */
.modal_section .modal_icon figure.pc {
    display: inline-block;
    vertical-align: middle;
}

.modal_section .modal_icon p {
    display: inline-block;
    vertical-align: middle;
    width: 70%;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
	margin-left: 20px;
}

.modal_section .outline > figure.top_img {
    position: absolute;
    top: 0;
    left: 50%;
}

@media only screen and (max-width: 750px){
    #article .modal_section > img.sp{
        position: absolute;
        left: 20px;
        top: 0;
        width: 30%;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    .modal_section .modal_icon p {
        margin-left: 0px;
    }
}

/* font */
.modal_section h1 {
	font-size: 4.0rem;
	font-weight: 600;
}

.modal_section h1 span.underline {
	display: inline-block;
    border-bottom: 8px solid #240700;
}

.modal_section p.nomal {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 400;
}

h2.work_modal_title .mein_title {
	font-size: 4.0rem;
	font-weight: 600;
    line-height: 1.2;
}

h2.work_modal_title .title_bable {
    display:inline-block;
    padding: 10px;
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    border-radius: 20px 20px 20px 0px;
    border: 1px solid #240700;
    background: #240700;
    color: #fff;
    line-height: 1.5;
}
h2.work_modal_title .sub_title {
    font-size: 1.8rem;
	font-weight: 600;
    line-height: 1.5;
}

h3.modal_step_title {
    position: relative;
    width: 100%;
    font-size: 2.5rem;
	font-weight: 600;
    line-height: 1.5;
    border-bottom: 1px solid #e0e0e0;
}
h3.modal_step_title span:first-child {
    position: relative;
    z-index: 2;
}
h3.modal_step_title > span:last-child {
    position: absolute;
    font-size: 6.0rem;
	font-weight: 600;
    color: #e0e0e0;
    text-align: right;
    bottom: -23px;
    right: 0;
	-webkit-transform: translate(-50% -50%);
	transform: translate(-50% -50%);
    z-index: 1;
}
.outline p.modal_step_bol,
.detail p.modal_step_bol {
    font-size: 1.8rem;
	font-weight: 600;
    line-height: 2.0;
}
.outline p.modal_step,
.detail p.modal_step {
    font-size: 1.5rem;
	font-weight: 400;
    line-height: 1.5;
}

/* box */
.modal_section .case_box {
    padding: 15px;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #e0e0e0;
    background: #e0e0e0;
    color: #240700;
    line-height: 1.5;
    text-align: left;
}

/* backgraund image */
.backimage {
    padding: 100px 80px;
    background-color: #666666;
    color: #fff;
    align-items: center;    
}
.prev_next {
    position: relative;
    padding: 40px 0;
    width: 100%;
    margin: 0;
    background-color: #fff;
    border-radius: 10px;
}

@media only screen and (max-width: 750px){
    .backimage {
        padding: 30px 20px;
    }
}

/* Schedule bar */
.Schedule_bar {
    list-style: none;
    padding: 0 0 0 20px;
    box-sizing: border-box;
}

.Schedule_bar li {
    position: relative;
    list-style-type: none;
    display: flex;
	justify-content: flex-start;
    align-items: stretch;
    color: #fff;
    padding: 10px  0px;
    font-size: 1.5rem;
}
.Schedule_bar li .time_block {
    width: 3.5rem;
}
.Schedule_bar li .dot_line {
    position: relative;
    width: 4.0rem;
}
.Schedule_bar li .dot_line::after {
    position: absolute;
    left: calc(50% + 1px);
    top: 0.75rem;
    border: 3px solid #d6dde3;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    content: '';
}
.Schedule_bar li:not(:last-child) .dot_line::before {
    position: absolute;
    display: block;
    left: 50%;
    top: 0.75rem;
    bottom: -28px;
    width: 3px;
    border-right: 1px solid #d6dde3;
    content: '';
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.Schedule_bar li .txt_block {
    display: inline-block;
    width: 100%;
    margin-left: 5px;
}

/* flex */
#main_wrapper .prev_next .flexbox2_wide {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main_wrapper .prev_next .flexbox2_wide > * {
    font-size: 2.0rem;
	font-weight: 600;
    margin: 0 auto;
}

@media only screen and (max-width: 750px){
    #main_wrapper .prev_next .flexbox2_wide {
        display: flex;
    }
    #main_wrapper .prev_next .flexbox2_wide .prev.w50,
    #main_wrapper .prev_next .flexbox2_wide .next.w50 {
        width: 50%;
    }
}

/* Other Departments */
.modal_win .workstyle_white_box.worlk {
    position: relative;
    margin: 0 20px 30px 0px;
    padding: 0;
    border-radius: 10px;
    border: solid 1px #240700;
}
.modal_win .workstyle_white_box.worlk a {
    padding: 17px 20px;
    margin: 0;
    display: block;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.modal_win .workstyle_white_box.worlk a div {
	margin-bottom: 0;
}
.modal_win .workstyle_white_box.worlk a p {
    display: none;
}
.modal_win .workstyle_white_box.worlk a h4 {
    position: initial;
    padding: 0;
    margin: 0 0 0 10px;
    font-size: 2.5rem;
}
.modal_win .workstyle_white_box.worlk a h4.underline span {
    display: inline-block;
    border-bottom: none;
}
#design_development.active_cont div.workstyle_white_box:has(a#design_development_pc),
#productionen_engineering.active_cont div.workstyle_white_box:has(a#productionen_engineering_pc),
#materials.active_cont div.workstyle_white_box:has(a#materials_pc),
#quality_control.active_cont div.workstyle_white_box:has(a#quality_control_pc),
#production_management.active_cont div.workstyle_white_box:has(a#production_management_pc),
#management.active_cont div.workstyle_white_box:has(a#management_pc),
#domestic_sales.active_cont div.workstyle_white_box:has(a#domestic_sales_pc),
#global_sales.active_cont div.workstyle_white_box:has(a#global_sales_pc) {
	display: none;
}

@media only screen and (max-width: 750px){
	.modal_win .workstyle_white_box.worlk 0 30px 15px {
	    margin: 0;
	}
	.modal_win .sp_menu .select_navi {
		position: relative;
	}
	.modal_win .sp_menu .select_navi:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1px;
		height: 100%;
		background: #240700;
		-webkit-transform: translate(0,-50%);
		transform: translate(-50%,-50%);
		content: '';
	}
	.modal_win .sp_menu .select_navi li {
		margin: 0 0 -1px;
		width: 50%;
		border-top: solid 1px #240700;
		border-bottom: solid 1px #240700;
	}
	#design_development.active_cont .sp_menu li:has(a#design_development_sp),
	#productionen_engineering.active_cont .sp_menu li:has(a#productionen_engineering_sp),
	#materials.active_cont .sp_menu li:has(a#materials_sp),
	#quality_control.active_cont .sp_menu li:has(a#quality_control_sp),
	#production_management.active_cont .sp_menu li:has(a#production_management_sp),
	#management.active_cont .sp_menu li:has(a#management_sp),
	#domestic_sales.active_cont .sp_menu li:has(a#domestic_sales_sp),
	#global_sales.active_cont .sp_menu li:has(a#global_sales_sp) {
		display: none;
	}
}

/* next/prev buttom */
.prev_next .prev span:first-child {
    display: inline-block;
    text-align: left;
}
.prev_next .next span:first-child {
    display: inline-block;
    text-align: right;
}
#article .prev_next .prev img {
    width: 70%;
    margin: 0 auto 0 0;
	object-fit: cover;
	aspect-ratio: 10 / 9;
}
#article .prev_next .next img {
    width: 70%;
    margin: 0 0 0 auto;
	object-fit: cover;
	aspect-ratio: 10 / 9;
}
.prev_next .prev {
    position: relative;
    padding: 0  0 0 50px;
    text-align: left;
    border-right: 1px dotted #e0e0e0;
}
.prev_next .next {
    position: relative;
    padding: 0 50px 0 0;
    text-align: right;
}
.prev_next .prev .prev_text {
    position: relative;
    padding-left: 60px;
}
.prev_next .prev .text_arrow {
    padding-left: 0;
}
.prev_next .next .next_text {
    position: relative;
    padding-right: 60px;
}
.prev_next .next .text_arrow {
    padding-right: 0;
}
.prev_next .text_arrow {
    font-size: 4.0rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.5;
}
.prev_next .text_dep {
    font-size: 2.0rem;
    font-weight: 600;
    margin-top: 0;
}
.prev_next .prev .more_circle_arrow,
.prev_next .next .more_circle_arrow {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    top: calc(5.0rem - 40px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dcd7d7;
    color: #333344;
    background: #fff;
}
.prev_next .prev .more_circle_arrow { left: 0px; }
.prev_next .next .more_circle_arrow { right: 0px; }

.prev_next .prev .more_circle_arrow::before,
.prev_next .prev .more_circle_arrow::after,
.prev_next .next .more_circle_arrow::before,
.prev_next .next .more_circle_arrow::after
{
    position: absolute;
    left: 40%;
    right: 40%;
    top: 0;
    bottom: 0;
    margin: auto;
    vertical-align: middle;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    content: "";
}
.prev_next .prev .more_circle_arrow::before,
.prev_next .next .more_circle_arrow::before {
    right: 50%;
    width: 12px;
    height: 2px;
    background: #240700;
}
.prev_next .prev .more_circle_arrow::after {
    left: 35%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #240700;
    border-right: 2px solid #240700;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.prev_next .next .more_circle_arrow::after {
    right: 35%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #240700;
    border-right: 2px solid #240700;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media only screen and (max-width: 750px){
    .prev_next {
        padding: 20px 0;
    }
    #article .prev_next .prev img,
    #article .prev_next .next img {
        width: 100%;
    }
    .prev_next .prev,
    .prev_next .next {
        padding: 20px;
        text-align: center;
    }
    .prev_next .prev span:first-child, 
    .prev_next .next span:first-child {
        text-align: center;
    }
    .prev_next .prev .prev_text {
        padding-left: 0;
    }
    .prev_next .prev .text_arrow {
        text-align: left;
        padding-left: 60px;
    }
    .prev_next .prev .text_dep {
        text-align: left;
    }
    .prev_next .next .next_text {
        padding-right: 0;
    }
    .prev_next .next .text_arrow {
        text-align: right;
        padding-right: 60px;
    }
    .prev_next .next .text_dep {
        text-align: right;
    }
    .prev_next .text_arrow {
        font-size: 2.5rem;
        margin-bottom: 10px;
        line-height: 40px;
    }
    .prev_next .text_dep {
        font-size: 1.8rem;
        margin-top: 10px;
    }
    #article .prev_next .prev img {
        aspect-ratio: 5 / 4;
    }
    #article .prev_next .next img {
        aspect-ratio: 5 / 4;
    }
}

/*===== ■2. Modal Window (Work Style) =====*/
.modal_win_imagemap {
    position: fixed; 
    display: none;
    inset: 0;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    z-index: 2;
}
.modal_win_imagemap.active_cont {
    display: block;
    opacity: 1;
}
.modal_contents_imagemap {
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 120px auto 0;
}

.modal_contents_imagemap.tokyo { 
    max-width: 640px;
}
.modal_contents_imagemap.osaka { 
    max-width: 820px;
}
.modal_contents_imagemap.nagoya {
    max-width: 870px;
}

.modal_section_imagemap {
    position: relative;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
}
.modal_section_imagemap > .modal_close_imagemap {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    color: #fff;
    background: #636262;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.modal_section_imagemap > .modal_close_imagemap::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    content: "";
}
.modal_section_imagemap > .modal_close_imagemap::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    content: "";
}

@media only screen and (max-width: 1392px){
	.modal_contents_imagemap {
        margin: 120px auto 0;
		width: calc(100% - 48px);
	}
}

@media only screen and (max-width: 750px) {
    .modal_contents_imagemap {
        margin: 120px 20px 0 20px;
    }
    .modal_section_imagemap {
        padding: 50px 0;
    }
    .modal_section_imagemap > .modal_close_imagemap {
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }
    .modal_section_imagemap > .modal_close_imagemap::before {
        width: 15px;
    }
    .modal_section_imagemap > .modal_close_imagemap::after {
        width: 15px;
    }
}

/*===== ■3. Modal Window (Video Style) =====*/
.modal_win_video {
    position: fixed; 
    display: none;
    inset: 0;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    z-index: 2;
}
.modal_win_video.active_cont {
    display: block;
    opacity: 1;
}
.modal_section_video {
    position: relative;
    padding: 30px 0 56.25% 0;
    height: 56.25%;
    border-radius: 10px;
    background-color: #fff;
}
.modal_section_video > .modal_close_video {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: #636262;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}
.modal_section_video > .modal_close_video::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    content: "";
}
.modal_section_video > .modal_close_video::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    border: 1px solid #fff;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    content: "";
}
.modal_contents_video {
    width: 60%;
    height: calc(100% - 140px);
    margin: 120px auto 0;
}
.modal_section_video > iframe {
    position: absolute;
    top: 10px;
    left: 25px;
    width: calc(100% - 50px);
    height: calc(100% - 20px);
} 

@media only screen and (max-width: 1392px){
	.modal_contents_video {
        margin: 120px auto 0;
	}
}

@media only screen and (max-width: 750px) {
    .modal_contents_video {
        margin: 120px 20px 0 20px;
    }
    .modal_section_video > .modal_close_video {
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }
    .modal_section_video > .modal_close_video::before {
        width: 15px;
    }
    .modal_section_video > .modal_close_video::after {
        width: 15px;
    }
    .modal_section_video > .video_style {
	    top: 40px;
	    left: 40px;
	    width: calc(100% - 80px);
	    height: calc(100% - 80px);
	} 
    .modal_contents_video {
        width: calc(100% - 40px);
        height: calc(100% - 200px);
        margin: 120px auto 0;
    }
}