/* ------------------------------------------------------------------------------------------- #workflow_all ------------------------------------------------------------------------------------------- */ #workflow_all {padding: 90px 5%;position: relative; z-index: 1;} @media only screen and (max-width: 960px) { #workflow_all { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #workflow_all { padding: 70px 5%;} } /* ------------------------------------------------------------------------------------------- #workflow_detail ------------------------------------------------------------------------------------------- */ #workflow_detail { padding: 90px 5% 0;position: relative; z-index: 1; } @media only screen and (max-width: 960px) { #workflow_detail { padding: 80px 5% 0;} } @media only screen and (max-width: 738px) { #workflow_detail { padding: 70px 5% 0;} } /* .titleArea */ #workflow_detail .titleArea { text-align: center; padding-bottom: 90px;} /* .headline */ #workflow_detail .headline { margin-bottom: 40px;} .headline h2.title_jp { font-size: 38px; font-family: 'Droid Serif','Shippori Mincho B1', serif; font-weight: 500; letter-spacing: 0.05em; line-height: 1.65; } .headline h2.title_jp br.spBlock {display: none;} .headline h2.title_jp span { display: block; font-size: 0.5em; letter-spacing: 0.05em; margin-bottom: 5px;} .headline h2.title_sub { display: inline-block; margin: 5px auto 0; padding: 0 10px; background: #fefefe; font-size: 18px; font-family: 'Droid Serif','Shippori Mincho B1', serif; font-weight: 500; text-indent: 2px; letter-spacing: 2px; line-height: 1.5; position: relative; z-index: 1;} .headline h2.title_sub:before { position: absolute; top: 50%; left: -35px; right: 100%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} .headline h2.title_sub:after { position: absolute; top: 50%; right: -35px; left: 100%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} /* .productImg */ .productImg { margin: 15px auto 30px; max-width: 400px; position: relative; z-index: 1;} .productImg img {border: #ddd 1px solid;} .productImg .line_top_left { position: absolute; top: 0; left: 0; height: 25px; width: 25px; border-top: #111 1px solid; border-left: #111 1px solid; z-index: 2;} .productImg .line_top_right { position: absolute; top: 0; right: 0; height: 25px; width: 25px; border-top: #111 1px solid; border-right: #111 1px solid; z-index: 2;} .productImg .line_bottom_left { position: absolute; bottom: 0; left: 0; height: 25px; width: 25px; border-bottom: #111 1px solid; border-left: #111 1px solid; z-index: 2;} .productImg .line_bottom_right { position: absolute; bottom: 0; right: 0; height: 25px; width: 25px; border-bottom: #111 1px solid; border-right: #111 1px solid; z-index: 2;} @media only screen and (max-width: 1024px) { .headline h2.title_jp { font-size: 35px; line-height: 1.6;} } @media only screen and (max-width: 960px) { #workflow_detail .titleArea { padding-bottom: 80px;} #workflow_detail .headline { margin-bottom: 35px;} .headline h2.title_jp { font-size: 30px; letter-spacing: 2px; line-height: 1.6; } .headline h2.title_jp span { font-size: 0.5em; padding-bottom: 5px;} .headline h2.title_sub { font-size: 16px;} .headline h2.title_sub:before { left: -30px;} .headline h2.title_sub:after { right: -30px;} } @media only screen and (max-width: 738px) { #workflow_detail .titleArea { text-align: center; padding-bottom: 70px;} #workflow_detail .headline { margin-bottom: 30px;} .headline h2.title_jp { font-size: 25px; letter-spacing: 2px; line-height: 1.6; } .headline h2.title_jp br.spBlock {display: block;} .headline h2.title_jp span { dfont-size: 0.5em; padding-bottom: 5px;} .headline h2.title_sub { margin: 5px auto 0; padding: 0 10px; font-size: 14px;} .headline h2.title_sub:before { left: -25px;} .headline h2.title_sub:after { right: -25px;} .productImg { margin: 15px auto 30px; max-width: 400px; position: relative; z-index: 1;} .productImg img {border: #ddd 1px solid;} .productImg .line_top_left, .productImg .line_top_right, .productImg .line_bottom_left, .productImg .line_bottom_right { height: 20px; width: 20px;} #workflow_detail .titleArea p { text-align: left; padding: 0 5%;} #workflow_detail .titleArea p br {display: none;} } /* .workflowArea */ #workflow_detail .workflowArea { padding: 90px 0; position: relative; z-index: 1; text-align: center; } #workflow_detail .workflowArea_line:after { position: absolute; top: 0; left: 0; right: 0; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} @media only screen and (max-width: 960px) { #workflow_detail .workflowArea { padding: 80px 0; } } @media only screen and (max-width: 738px) { #workflow_detail .workflowArea { padding: 70px 0; } } /* .headline_workflow */ #workflow_detail .workflowArea .headline_workflow { text-align: center;} /* .noArea */ #workflow_detail .workflowArea .headline_workflow .noArea { margin: 0 auto 25px; width: 90px; height: 90px; position: relative; z-index: 1; border:#111 1px dashed; text-align: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} #workflow_detail .workflowArea .headline_workflow span.word {position:absolute; top: 25px; left: 0; right: 0; font-size: 11px; font-family: 'courier_prime_sansbold'; font-weight: normal; letter-spacing: 0.5px; line-height: 0; } #workflow_detail .workflowArea .headline_workflow span.no {position:absolute; bottom: 35px; left: 0; right: 0; font-size: 40px; font-family: 'Libre Baskerville', serif; font-weight: 400; line-height: 0; } /* h3 */ #workflow_detail .workflowArea .headline_workflow h3 { display: inline-block; margin: 0 auto; padding: 0 25px; font-size: 30px; font-family: 'Droid Serif','Shippori Mincho B1', serif; font-weight: 500; letter-spacing: 0.065em; line-height: 1.7; position: relative; z-index: 1;} #workflow_detail .workflowArea .headline_workflow h3:before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; content: ""; border-top:#111 1px solid; border-bottom:#111 1px solid; border-left: #111 1px solid; z-index: -1;} #workflow_detail .workflowArea .headline_workflow h3:after { position: absolute; top: 0; bottom: 0; right: 0; width: 5px; content: ""; border-top:#111 1px solid; border-bottom:#111 1px solid; border-right: #111 1px solid; z-index: -1;} @media only screen and (max-width: 960px) { #workflow_detail .workflowArea .headline_workflow .noArea { margin: 0 auto 25px; width: 80px; height: 80px; } #workflow_detail .workflowArea .headline_workflow span.word {top: 22px; font-size: 10px; } #workflow_detail .workflowArea .headline_workflow span.no {bottom: 30px; font-size: 35px; } #workflow_detail .workflowArea .headline_workflow h3 { padding: 0 20px; font-size: 25px; letter-spacing: 2px; line-height: 1.6; } } @media only screen and (max-width: 738px) { #workflow_detail .workflowArea .headline_workflow .noArea { margin: 0 auto 25px; width: 70px; height: 70px; } #workflow_detail .workflowArea .headline_workflow span.word {top: 18px; font-size: 9px; } #workflow_detail .workflowArea .headline_workflow span.no {bottom: 27px; font-size: 30px; } #workflow_detail .workflowArea .headline_workflow h3 { padding: 0 14px 0 15px; font-size: 18px; letter-spacing: 1.5px; line-height: 1.6; } } /* .catchArea */ #workflow_detail .workflowArea .catchArea { margin-top: 45px; text-align: center;} #workflow_detail .workflowArea .catchArea h4.en {font-size: 30px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 0.035em; line-height:1.4;} #workflow_detail .workflowArea .catchArea h4.en span { display: block; font-style: italic;} #workflow_detail .workflowArea .catchArea h4.jp { margin-top: 15px; text-indent: 1em; font-size: 16px; font-family: 'Droid Serif','Shippori Mincho B1', serif;font-weight: 500; letter-spacing: 0.1em; line-height: 1.7;} @media only screen and (max-width: 960px) { #workflow_detail .workflowArea .catchArea { margin-top: 35px;} #workflow_detail .workflowArea .catchArea h4.en {font-size: 25px; letter-spacing: 1.5px; line-height:1.4;} #workflow_detail .workflowArea .catchArea h4.jp { margin-top: 15px; text-indent: 1em; font-size: 14px; letter-spacing: 2px; line-height: 1.7;} } @media only screen and (max-width: 738px) { #workflow_detail .workflowArea .catchArea { margin-top: 30px;} #workflow_detail .workflowArea .catchArea h4.en {font-size: 22px; letter-spacing: 0.5px; line-height:1.5;} #workflow_detail .workflowArea .catchArea h4.jp { margin-top: 15px; text-indent: 1em; font-size: 13px; letter-spacing: 2px; line-height: 1.7;} } @media only screen and (max-width: 414px) { #workflow_detail .workflowArea .catchArea h4.en {font-size: 18px; letter-spacing: 0.5px; line-height:1.5;} } /* .mainImgArea */ #workflow_detail .workflowArea .mainImgArea { margin-top: 60px; border: #111 1px dotted; padding: 45px;} /* .txtArea */ #workflow_detail .workflowArea .txtArea { margin: 60px auto 0; padding: 0 5%; max-width: 700px; position: relative; z-index: 1; } #workflow_detail .workflowArea .txtArea:after { display: block; margin: 50px auto 0; width: 50px; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} #workflow_detail .workflowArea .txtArea p { text-align: left;} @media only screen and (max-width: 960px) { #workflow_detail .workflowArea .mainImgArea { margin-top: 50px; padding: 35px;} #workflow_detail .workflowArea .txtArea { margin: 50px auto 0; } #workflow_detail .workflowArea .txtArea:after { margin: 40px auto 0; } } @media only screen and (max-width: 738px) { #workflow_detail .workflowArea .mainImgArea { margin: 40px -5.5% 0; border: none; padding: 0; overflow: hidden;} #workflow_detail .workflowArea .txtArea { margin: 40px auto 0; } #workflow_detail .workflowArea .txtArea:after { margin: 30px auto 0; } } /* .subImgArea */ #workflow_detail .workflowArea .subImgArea { margin-top: 60px; text-align: center;} #workflow_detail .workflowArea .subImgArea img { max-width: 900px;} #workflow_detail .workflowArea .subImgArea_double { margin: 50px -10px -10px; font-size: 0;} #workflow_detail .workflowArea .subImgArea_double .photoBox { display: inline-block; width: 50%; border:transparent 10px solid;} #workflow_detail .workflowArea .subImgArea_triple { margin: 50px -10px -10px; font-size: 0;} #workflow_detail .workflowArea .subImgArea_triple .photoBox { display: inline-block; width: 33.333%; border:transparent 10px solid;} #workflow_detail .workflowArea .subImgArea_4 { margin: 50px -10px -10px; font-size: 0;} #workflow_detail .workflowArea .subImgArea_4 .photoBox { display: inline-block; width: 25%; border:transparent 10px solid;} @media only screen and (max-width: 960px) { #workflow_detail .workflowArea .subImgArea { margin-top: 50px; } #workflow_detail .workflowArea .subImgArea_double { margin: 50px -10px -10px; font-size: 0;} #workflow_detail .workflowArea .subImgArea_triple { margin: 40px -10px -10px;} #workflow_detail .workflowArea .subImgArea_4 { margin: 40px -10px -10px;} } @media only screen and (max-width: 738px) { #workflow_detail .workflowArea .subImgArea { margin-top: 40px; } #workflow_detail .workflowArea .subImgArea_double { margin: 40px 0 0;} #workflow_detail .workflowArea .subImgArea_double .photoBox { display: block; width: 100%; border:none; margin-top: 15px;} #workflow_detail .workflowArea .subImgArea_triple { margin: 40px 0 0;} #workflow_detail .workflowArea .subImgArea_triple .photoBox { display: block; width: 100%; border:none; margin-top: 15px;} #workflow_detail .workflowArea .subImgArea_4 { margin: 40px 0 0;} #workflow_detail .workflowArea .subImgArea_4 .photoBox { display: block; width: 100%; border:none; margin-top: 15px;} } /* .linkArea */ #workflow_detail .linkArea { margin-top: 0; padding: 90px 0 0; position: relative; z-index: 1; text-align: center; } #workflow_detail .linkArea:after { position: absolute; top: 0; left: 0; right: 0; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} @media only screen and (max-width: 960px) { #workflow_detail .linkArea { padding: 80px 0 0; } } @media only screen and (max-width: 738px) { #workflow_detail .linkArea { padding: 70px 0 0; } } /* .linkPageArea */ #workflow_detail .linkPageArea { margin-top: 0; padding: 0 0 90px; position: relative; z-index: 1; text-align: center; } #workflow_detail .linkPageArea .linkPageBox {} #workflow_detail .linkPageArea .linkPageBox a.btn { display: inline-block; margin:0; width:100%; max-width:400px; color: #fefefe; background: #111; border:#111 2px solid; text-decoration: none; font-size:14px; line-height: 80px; text-align: center; position: relative; z-index:1; overflow: hidden;font-weight: 400; letter-spacing: 0.01em;} #workflow_detail .linkPageArea .linkPageBox a.btn:before { position:absolute; top:0; right:12px; bottom:0; font-size:1em; font-family:themify;content:"\e649";font-weight:normal; z-index:1; -webkit-transition: all 0.5s ease;transition: all 0.5s ease; } #workflow_detail .linkPageArea .linkPageBox a.btn:after { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; background: #fefefe; content: ""; z-index: -1; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease} @media (min-width: 961px) and (hover: hover) { #workflow_detail .linkPageArea .linkPageBox a.btn:hover { color: #111;} #workflow_detail .linkPageArea .linkPageBox a.btn:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)} } @media only screen and (max-width: 960px) { #workflow_detail .linkPageArea { padding: 0 0 80px; } #workflow_detail .linkPageArea .linkPageBox a.btn { line-height: 65px;} #workflow_detail .linkPageArea .linkPageBox a.btn:before { font-size:14px;} #workflow_detail .linkPageArea .linkPageBox a.btn:after{display: none;} } @media only screen and (max-width: 738px) { #workflow_detail .linkPageArea { padding: 0 0 70px; } #workflow_detail .linkPageArea .linkPageBox a.btn { font-size:13px;line-height: 60px; } } @media only screen and (max-width: 320px) { #workflow_detail .linkPageArea .linkPageBox a.btn { font-size:12px;line-height: 60px; } } /* ------------------------------------------------ #workflow_others ------------------------------------------------ */ #workflow_others {padding: 90px 5%;position: relative; z-index: 1;} #workflow_others:after { position: absolute; top: 0; left:5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} @media only screen and (max-width: 900px) { #workflow_others { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #workflow_others { padding: 70px 5%;} } /* .flowArea */ #workflow_others .flow_area { margin-top: 80px;}