@charset "UTF-8"; @media screen and (min-width: 768px),print { #contentsmain { width: 1000px;margin: 0 auto 95px;text-align: center;padding-top: 35px;} #contentsmain .inner-Box { } #contentsmain .inner-Box h2 { margin-bottom: 24px;} #contentsmain .inner-Box h2 img{ } #contentsmain .inner-Box p{ font-weight: 700;color: #332e1b;font-size: 24px;letter-spacing: 1.2px;} #contents01 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents01::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents01 span.no { position: absolute; top: 0; left: 0; } #contents01 h2{ margin-bottom: 50px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents01 .inner-Box1 { margin: 0 50px 134px; background: #fff; position: relative; padding-left: 267px;height: 180px;padding-top: 25px;} #contents01 .inner-Box1::before{ content: url('../images/flow/contents01-photo01.png'); position: absolute; left: 65px;bottom: -10px; } #contents01 .inner-Box1 p{ font-size: 22px; font-weight: 700; letter-spacing: 1.1px; line-height: 46px;} #contents01 .inner-Box1 p span{ font-size: 18px; } #contents01 .inner-Box1 h3{ background: url('../images/flow/contents01-back.png')no-repeat top center; width: 1000px; height: 100px; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 1px; position: absolute;bottom: -100px;left: 0;padding-top: 19px;} #contents01 .inner-Box2 { width: 1020px; margin: 0 auto; } #contents01 .inner-Box2 h4{ font-size: 24px; text-align: center; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 6px; padding-left: 44px;} #contents01 .inner-Box2 figure.sp-tel-link { width: 800px; margin: 0 auto 24px;border-bottom: 1px dashed #121b41; position: relative;display: block;text-align: center;padding-bottom: 29px;} #contents01 .inner-Box2 figure::before{ content: url('../images/flow/contents01-photo02.png'); position: absolute; bottom: -9px; right: 111px; } #contents01 .inner-Box2 ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;} #contents01 .inner-Box2 ul li { width: 500px; float: left; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 1px; margin-right: 19px;} #contents01 .inner-Box2 ul li a{ color: #ab6629; } #contents01 .inner-Box2 ul li:nth-child(2){ margin-right: 0; } #contents01 .inner-Box2 ul li:nth-child(2) a{ color: #286da4; } #contents01 .inner-Box2 ul li a p{ margin-bottom: 5px;} #contents02 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents02::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents02 span.no { position: absolute; top: 0; left: 0; } #contents02 h2{ margin-bottom: 100px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents02 .clearfix { margin: 0 50px 0 50px; } #contents02 .leftbox { width: 490px; background-color: #ffffff; height: 289px; position: relative; margin-right:20px; float: left;} #contents02 .leftbox span.icon { position: absolute; top: -50px; right: 19px; } #contents02 .leftbox h3{ color: #ffffff; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-align: center; background-color: #ab6629; padding: 7px 0;margin-bottom: 26px;} #contents02 .leftbox h4{ font-size: 22px; text-align: center; font-weight: 700; letter-spacing: 1.1px; border-bottom: 1px dashed #121b41; margin: 0 30px 15px; padding-bottom: 13px;} #contents02 .leftbox p{ margin: 0 30px; } #contents02 .rightbox { width: 490px; background-color: #ffffff; height: 289px; position: relative; margin-right:0px; float: left;} #contents02 .rightbox span.icon { position: absolute; top: -50px; right: 19px; } #contents02 .rightbox h3{ color: #ffffff; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-align: center; background-color: #286da4; padding: 7px 0;margin-bottom: 26px;} #contents02 .rightbox h4{ font-size: 22px; text-align: center; font-weight: 700; letter-spacing: 1.1px; border-bottom: 1px dashed #121b41; margin: 0 30px 15px; padding-bottom: 13px;} #contents02 .rightbox p{ margin: 0 30px; } #contents03 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents03::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents03 span.no { position: absolute; top: 0; left: 0; } #contents03 span.icon { position: absolute; top: -50px; right: -61px; } #contents03 h2{ margin-bottom: 46px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents03 .inner-Box { min-height: 300px; margin: 0 50px 0 50px; position: relative; padding-left: 460px; } #contents03 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 24px; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 20px; } #contents03 .inner-Box figure{ position: absolute; top: 4px; left: 0; } #contents03 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; margin-bottom: 30px; } #contents04 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 32px;} #contents04::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents04 span.no { position: absolute; top: 0; left: 0; } #contents04 span.icon { position: absolute; top: -50px; right: -61px; } #contents04 h2{ margin-bottom: 46px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents04 .inner-Box { margin: 0 50px 0 50px; position: relative; } #contents04 .inner-Box h3{ text-align: center; color: #332e1b; font-weight: 700; font-size: 24px; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 20px; } #contents05 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents05::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents05 span.no { position: absolute; top: 0; left: 0; } #contents05 span.icon { position: absolute; top: -50px; right: -43px; } #contents05 h2{ margin-bottom: 46px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents05 .inner-Box { min-height: 300px; margin: 0 50px 0 50px; position: relative; padding-left: 460px; } #contents05 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 24px; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 20px; } #contents05 .inner-Box figure{ position: absolute; top: 4px; left: 0; } #contents05 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; margin-bottom: 30px; } #contents06 { width: 1100px; margin: 0 auto 80px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents06::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -88px; left: 50%; margin-left: -3px;} #contents06 span.no { position: absolute; top: 0; left: 0; } #contents06 span.icon { position: absolute; top: -50px; right: -11px; } #contents06 h2{ margin-bottom: 46px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents06 .inner-Box { min-height: 300px; margin: 0 50px 0 50px; position: relative; padding-left: 460px; } #contents06 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 24px; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 20px; } #contents06 .inner-Box figure{ position: absolute; top: 4px; left: 0; } #contents06 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; margin-bottom: 30px; } #contents07 { width: 1100px; margin: 0 auto 90px; background-color: #f4efe7; position: relative; padding-bottom: 50px;} #contents07 span.no { position: absolute; top: 0; left: 0; } #contents07 span.icon { position: absolute; top: -50px; right: -51px; } #contents07 h2{ margin-bottom: 46px; text-align: center; color: #ffffff; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; background-color: #38240e; height: 100px; padding-top: 22px;} #contents07 .inner-Box { min-height: 300px; margin: 0 50px 0 50px; position: relative; padding-left: 460px; } #contents07 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 24px; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 20px; } #contents07 .inner-Box figure{ position: absolute; top: 4px; left: 0; } #contents07 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; margin-bottom: 30px; } #contentsbottom { background: url('../images/flow/bottom-back.jpg')no-repeat top center; padding-bottom: 50px;margin-bottom: -52px;} #contentsbottom .inner-Box { width: 1200px; margin: 0 auto; text-align: center; position: relative; padding-top: 120px;} #contentsbottom span.en { position: absolute; top: 71px; left: 107px; } #contentsbottom h2{ font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: 2px; margin-bottom: -16px;} #contentsbottom h2 span{ background: #fff; display: inline-block; padding: 20px 27px;margin-bottom: 4px;} #contentsbottom .inner-Box figure{ } .bottom-banner{ width: 1200px; padding: 50px 30px 15px 30px; margin: 0 auto 104px; display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative;z-index: 3;background: #fff;} .bottom-banner li{ width: 360px; float: left; margin-right: 30px; text-align: center; } .bottom-banner li:nth-child(3){ margin-right: 0px; } .bottom-banner li img{ margin-bottom: 16px; } .bottom-banner li p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; font-weight: bold;} } @media screen and (max-width: 767px) { #contentsmain { margin: 0 auto 12.4vw;text-align: center;padding-top: 4.6vw;} #contentsmain .inner-Box { } #contentsmain .inner-Box h2 { margin-bottom: 3.1vw;} #contentsmain .inner-Box h2 img{ } #contentsmain .inner-Box p{ font-weight: 700;color: #332e1b;font-size: 3.6vw;letter-spacing: 0.3vw;} #contents01 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents01::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents01 span.no { position: absolute; top: 0; left: 0; } span.no img { height: 13vw; width: auto; } #contents01 h2{ margin-bottom: 6.5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents01 .inner-Box1 { margin: 0 4.5vw 28.5vw; background: #fff; position: relative; height: 35.7vw;padding: 3vw;} #contents01 .inner-Box1::before{ content: url('../images/flow/contents01-photo01.png'); position: absolute; bottom: -1vw; right: 0; transform: scale(0.5); transform-origin: bottom right;} #contents01 .inner-Box1 p{ font-size: 3.6vw; font-weight: 700; letter-spacing: 0.3vw; line-height:1.6;} #contents01 .inner-Box1 p span{ font-size: 3.2vw; } #contents01 .inner-Box1 h3{ background: url('../images/flow/sp-contents01-back.png')no-repeat top center; background-size: 100% auto; width: 100%; height: 25vw; text-align: center; font-size: 3.6vw; font-weight: 700; letter-spacing: 0.3vw; position: absolute;bottom: -25vw;left: 0;padding-top: 2.5vw;} #contents01 .inner-Box2 { margin: 0 4vw; } #contents01 .inner-Box2 h4{ font-size: 4.6vw; text-align: center; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 0.8vw; padding-left: 5.7vw;} #contents01 .inner-Box2 figure.sp-tel-link { margin: 0 auto 4.1vw;border-bottom: 0.1vw dashed #121b41; position: relative;display: block;text-align: center;padding: 0 6vw 3.8vw;} #contents01 .inner-Box2 figure::before{ content: url('../images/flow/contents01-photo02.png'); position: absolute; bottom: -1.2vw; right: 110.1vw; } #contents01 .inner-Box2 ul{display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;} #contents01 .inner-Box2 ul li { text-align: center; font-size: 3.6vw; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 3.5vw;} #contents01 .inner-Box2 ul li a{ color: #ab6629; } #contents01 .inner-Box2 ul li:nth-child(2){ margin-right: 0; } #contents01 .inner-Box2 ul li:nth-child(2) a{ color: #286da4; } #contents01 .inner-Box2 ul li a p{ margin-bottom: 0.7vw;} #contents02 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents02::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents02 span.no { position: absolute; top: 0; left: 0; } #contents02 h2{ margin-bottom: 13.0vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;padding-left: 10vw;} #contents02 .clearfix { margin: 0 4vw; } #contents02 .leftbox { background-color: #ffffff; position: relative; margin-bottom: 10.6vw; padding-bottom: 6vw;} #contents02 .leftbox span.icon { position: absolute; top: -6.5vw; right: 2.5vw; width: 24vw;} #contents02 .leftbox h3{ color: #ffffff; font-size: 4.6vw; font-weight: 700; letter-spacing: 0.3vw; text-align: center; background-color: #ab6629; padding: 0.9vw 0;margin-bottom: 4vw;} #contents02 .leftbox h4{ font-size: 4vw; text-align: center; font-weight: 700; letter-spacing: 0.3vw; border-bottom: 0.1vw dashed #121b41; margin: 0 3.9vw 4vw; padding-bottom: 2vw;} #contents02 .leftbox p{ margin: 0 3.9vw; font-size: 3.6vw;} #contents02 .rightbox { background-color: #ffffff; position: relative; margin-bottom: 4.6vw; padding-bottom: 6vw;} #contents02 .rightbox span.icon { position: absolute; top: -6.5vw; right: 2.5vw; width: 24vw;} #contents02 .rightbox h3{ color: #ffffff; font-size: 4.6vw; font-weight: 700; letter-spacing: 0.3vw; text-align: center; background-color: #286da4; padding: 0.9vw 0;margin-bottom: 4vw;} #contents02 .rightbox h4{ font-size: 4vw; text-align: center; font-weight: 700; letter-spacing: 0.3vw; border-bottom: 0.1vw dashed #121b41; margin: 0 3.9vw 4vw; padding-bottom: 2vw;} #contents02 .rightbox p{ margin: 0 3.9vw; font-size: 3.6vw;} #contents03 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents03::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents03 span.no { position: absolute; top: 0; left: 0; } #contents03 h2{ margin-bottom: 5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents03 span.icon { position: absolute; top: -8vw; right: -0vw; width: 23vw;} #contents03 .inner-Box { margin: 0 4vw; position: relative; } #contents03 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 4.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 2.6vw; } #contents03 .inner-Box figure{ margin-bottom: 4vw; } #contents03 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; margin-bottom: 3.9vw; } #contents04 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents04::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents04 span.no { position: absolute; top: 0; left: 0; } #contents04 h2{ margin-bottom: 5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents04 span.icon { position: absolute; top: -8vw; right: -0vw; width: 23vw;} #contents04 .inner-Box { margin: 0 6.5vw 0 6.5vw; position: relative; } #contents04 .inner-Box h3{ text-align: center; color: #332e1b; font-weight: 700; font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 2.6vw; } #contents05 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents05::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents05 span.no { position: absolute; top: 0; left: 0; } #contents05 h2{ margin-bottom: 5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents05 span.icon { position: absolute; top: -9vw; right: -0vw; width: 19vw;} #contents05 .inner-Box { margin: 0 4vw; position: relative; } #contents05 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 4.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 2.6vw; } #contents05 .inner-Box figure{ margin-bottom: 4vw; } #contents05 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; margin-bottom: 3.9vw; } #contents06 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents06::before{ content: url('../images/flow/line.png'); position: absolute; bottom: -11.5vw; left: 50%; margin-left: -0.4vw;transform: scale(0.5); transform-origin: bottom right;} #contents06 span.no { position: absolute; top: 0; left: 0; } #contents06 h2{ margin-bottom: 5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents06 span.icon { position: absolute; top: -8vw; right: -0vw; width: 18vw;} #contents06 .inner-Box { margin: 0 4vw; position: relative; } #contents06 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 4.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 2.6vw; } #contents06 .inner-Box figure{ margin-bottom: 4vw; } #contents06 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; margin-bottom: 3.9vw; } #contents07 { margin: 0 3vw 10.4vw; background-color: #f4efe7; position: relative; padding-bottom: 6.5vw;} #contents07 span.no { position: absolute; top: 0; left: 0; } #contents07 h2{ margin-bottom: 5vw; text-align: center; color: #ffffff; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; background-color: #38240e; height: 13.0vw; padding-top: 2.9vw;} #contents07 span.icon { position: absolute; top: -8vw; right: -0vw; width: 23vw;} #contents07 .inner-Box { margin: 0 4vw; position: relative; } #contents07 .inner-Box h3{ color: #332e1b; font-weight: 700; font-size: 4.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 2.6vw; } #contents07 .inner-Box figure{ margin-bottom: 4vw; } #contents07 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; margin-bottom: 3.9vw; } #contentsbottom { background: url('../images/flow/sp-bottom-back.jpg')no-repeat top center; background-size: 100% auto; padding-bottom: 9.5vw;margin-bottom: -13.8vw;} #contentsbottom .inner-Box { margin: 0 4vw; text-align: center; position: relative; padding-top: 12.6vw;} #contentsbottom span.en { position: absolute; top: 70.1vw; left: 100.9vw; } #contentsbottom h2{ font-size: 4.7vw; line-height: 1; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: -2.8vw;} #contentsbottom h2 span{background: #fff;display: inline-block;padding: 2.6vw 0.9vw;margin-bottom: 0.5vw;} #contentsbottom .inner-Box figure{ margin-bottom: 4vw; } .bottom-banner{ padding: 8vw 14vw 4vw; margin: 0 4vw;display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; background: #fff;} .bottom-banner li{ margin-bottom: 5vw; text-align: center; } .bottom-banner li:nth-child(2){ margin-right: 0vw; } .bottom-banner li img{ margin-bottom: 2vw; } .bottom-banner li p{ font-size: 3.8vw; letter-spacing: 0.3vw; line-height:1.6; font-weight: bold;} }