@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; box-sizing: border-box; } html{ line-height: 1; } .clearfix:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix{ height: 1%; } .clearfix{ display: block; } /* End hide from IE-mac */ ol, ul{ list-style: none; } table{ border-collapse: collapse; border-spacing: 0; } .clear { clear: both; } caption, th, td{ text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote{ quotes: none; } q:before, q:after, blockquote:before, blockquote:after{ content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{ display: block; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ font-family: 'Noto Sans JP', sans-serif; font-weight: 400; line-height: 1.5; -webkit-text-size-adjust: 100%; color: #333; } img{ height: auto; max-width: 100%; vertical-align: top; } a{ text-decoration: none; } @media screen and (max-width: 768px) { .hidden-sp{ display: none !important; } } @media screen and (min-width: 769px) { .hidden-pc{ display: none !important; } } /*------------------------------------------ サービス別レスポンシブ ------------------------------------------*/ /*youtube*/ .youtubeWrapper{ position: relative; width: 100%; padding-top: 56.25%; } .youtubeWrapper iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 480px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -140px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; } /*------------------------------------------ color ------------------------------------------*/ $mainColor: #801512; $secondaryColor: #b76866; /*------------------------------------------ cmn ------------------------------------------*/ .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } .loopSlide{ display: flex; display: -ms-flex; width: 100%; height: 260px; overflow: hidden; img { min-width: 2459px; max-width: 2459px; height: 260px; &:first-child { animation: slide1 120s -60s linear infinite; } &:last-child { animation: slide2 120s linear infinite; } } } @keyframes slide1 { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes slide2 { 0% { transform: translateX(0); } to { transform: translateX(-200%); } } @media screen and (max-width: 768px) { .loopSlide{ display: flex; width: 100%; height: 130px; overflow: hidden; img { min-width: 1230px; max-width: 1230px; height: 130px; &:first-child { animation: slide1 120s -60s linear infinite; } &:last-child { animation: slide2 120s linear infinite; } } } } /*------------------------------------------ body ------------------------------------------*/ #wrapper{ min-width: 980px; padding: 150px 0 0 0; } @media screen and (max-width: 1299px) { #wrapper{ padding: 60px 0 0 0; } } @media screen and (max-width: 768px) { #wrapper{ min-width: inherit; } } /*------------------------------------------ header nav ------------------------------------------*/ /*PC*/ header{ width: 100%; height: 150px; position: fixed; left: 0; top: 0; z-index: 1000; background: rgba(255,255,255,1); transition: 0.3s; .headerInner{ height: 100%; .logoBoxSP{ display: none; line-height: 1; *{ line-height: 1; } span{ width: 20vw; max-width: 140px; height: 3vw; max-height: 22px; padding: 1vw 20px; display: block; background: $secondaryColor; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; } } .logoBox{ padding-right: 150px; position: relative; span{ width: 140px; height: 26px; display: block; background: $secondaryColor; font-size: 14px; color: #FFF; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; position: absolute; right: 0px; top: -1px; } } .headerTop{ display: none; position: fixed; right: 20px; top: 20px; z-index: 1000; width: 60px; height: 60px; } .boxLR{ height: 100%; display: -ms-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; .boxL{ padding: 0 0 0 30px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .inner{ .logoBox{ margin-bottom: 30px; transition: 0.3s; } nav{ .navInner{ ul{ display: -ms-flex; display: flex; li{ &:not(:last-child){ margin-right: 40px; } a{ font-size: 18px; color: #333; &:hover{ text-decoration: underline; } } } } } } } } .boxR{ padding: 0 20px 0 0; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; ul{ display: -ms-flex; display: flex; li{ &:not(:last-child){ margin-right: 2px; } a{ width: 270px; height: 80px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 16px; color: #FFF; transition: 0.3s; &.btn_red{ background: $mainColor; &:hover{ background: $secondaryColor; } } &.btn_gray{ background: #333; &:hover{ background: #666; } } } } } } } } &.fix{ height: 90px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ .boxLR{ .boxL{ .inner{ .logoBox{ margin-bottom: 10px; } } } .boxR{ ul{ li{ a{ height: 60px; } } } } } } } } /*SP*/ @media screen and (max-width: 1299px) { header{ width: 100%; height: 60px; .headerInner{ .logoBoxSP{ height: 100%; padding: 0 80px 0 5vw; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .logoBox{ } .headerTop{ display: block; position: fixed; right: 0px; top: 0px; z-index: 1000; width: 60px; height: 60px; } .boxLR{ display: none; width: 100%; height: 100%; padding: 100px 0 0 0; position: fixed; top: 0; left: 0; background: #FFF; .boxL{ padding: 0 0 30px 0; display: block; .inner{ .logoBox{ display: none; } nav{ .navInner{ text-align: center; ul{ display: block; li{ &:not(:last-child){ margin: 0 0 15px 0; } a{ font-size: 16px; color: #333; &:hover{ text-decoration: underline; } } } } } } } } .boxR{ padding: 0 0 0 0; display: block; ul{ display: block; li{ margin: 0 auto; &:not(:last-child){ margin: 0 auto 20px auto; } a{ width: 270px; height: 60px; margin: 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; font-size: 16px; color: #FFF; transition: 0.3s; &.btn_red{ background: $mainColor; &:hover{ background: $secondaryColor; } } &.btn_gray{ background: #333; &:hover{ background: #666; } } } } } } } } &.fix{ height: 60px; box-shadow: 0 0 10px rgba(0,0,0,0.2); .headerInner{ .boxLR{ .boxL{ .inner{ .logoBox{ margin-bottom: 0; } } } .boxR{ ul{ li{ a{ height: 60px; } } } } } } } } } /*------------------------------------------ menuTrigger ------------------------------------------*/ .menuBtn{ width: 100%; height: 100%; display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; -ms-align-items: center; align-items: center; cursor: pointer; } .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 50px; height: 30px; } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background: $mainColor; } .menu-trigger.active span { } .menu-trigger span:nth-of-type(1) { top: 0px; } .menu-trigger span:nth-of-type(2) { top: 50%; transform: translate(0, -50%); } .menu-trigger span:nth-of-type(3) { bottom: 0px; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(14px) rotate(45deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-14px) rotate(-45deg); } @media screen and (max-width: 768px) { .menu-trigger { width: 25px; height: 15px; } .menu-trigger span:nth-of-type(2) { top: 7px; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); } } /*------------------------------------------ #cmn ------------------------------------------*/ .innerBox{ max-width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { } /*------------------------------------------ #mv ------------------------------------------*/ .mvWrapper{ margin-bottom: 135px; .mv{ .sp{ display: none; } .inner{ padding: 0 0 0 100px; position: relative; } .txtBox{ width: 100%; max-width: 500px; padding: 100px 0 70px 0; position: absolute; left: 0px; bottom: 0px; z-index: 100; background: #FFF; h1{ text-align: center; span{ width: 100%; max-width: 320px; height: 50px; margin: 25px auto 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; background: $secondaryColor; } } } .slick-slider{ img{ width: 100%; } } .slick-dots{ bottom: -55px; li{ width: 20px; height: 20px; margin: 0 2px; button{ width: 20px; height: 20px; padding: 0px; position: inherit; top: inherit; left: inherit; font-size: 16px; line-height: 1; &:before{ content: "○"; width: 20px; height: 20px; font-size: 16px; opacity: 1; display: block; position: inherit; left: inherit; top: inherit; text-align: center; } } &.slick-active{ button{ &:before{ content: "●"; } } } } } } } @media screen and (max-width: 768px) { .mvWrapper{ margin-bottom: 100px; .mv{ .sp{ display: block; } .pc{ display: none; } .inner{ padding: 0 0 0 0; position: relative; } .txtBox{ width: 100%; max-width: 500px; padding: 50px 5% 0 5%; margin: 0 auto; position: inherit; left: inherit; bottom: inherit; z-index: 100; background: none; h1{ text-align: center; span{ width: 100%; max-width: 320px; height: 50px; margin: 25px auto 0 auto; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; background: $secondaryColor; } } } .slick-slider{ margin-bottom: 80px; img{ width: 100%; } } .slick-dots{ bottom: -55px; li{ width: 20px; height: 20px; margin: 0 2px; button{ width: 20px; height: 20px; padding: 0px; position: inherit; top: inherit; left: inherit; font-size: 16px; line-height: 1; &:before{ content: "○"; width: 20px; height: 20px; font-size: 16px; opacity: 1; display: block; position: inherit; left: inherit; top: inherit; text-align: center; } } &.slick-active{ button{ &:before{ content: "●"; } } } } } } } } /*------------------------------------------ #cmn ------------------------------------------*/ .ttlBox{ h2{ >span{ display: block; &.en{ margin-bottom: 15px; font-size: 14px; font-weight: 400; font-family: 'Noto Serif JP', serif; color: $mainColor; letter-spacing: 0.05em; } &.jp{ font-size: 24px; font-weight: 400; letter-spacing: 0.1em; } } } } .btn{ display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; -ms-justify-content: center; justify-content: center; transition: 0.3s; >span{ position: relative; text-align: center; } &.btn_01{ width: 310px; height: 80px; background: url("../img/arrow_right_black_01.png") no-repeat right 10px center / 10px, #FFF; border: 1px solid #333; color: #333; font-size: 18px; letter-spacing: 0.1em; &:hover{ background: url("../img/arrow_right_white_01.png") no-repeat right 10px center / 10px, #333; color: #FFF; } } } .slick-current{ .btn.btn_02{ &:after{ opacity: 0; } } } @media screen and (max-width: 768px) { } @media screen and (max-width: 480px) { } /*------------------------------------------ #contents_01 ------------------------------------------*/ .contents_bg_01{ margin-bottom: 100px; .contents_01{ min-height: 540px; position: relative; >.imgBox{ width: 53.75%; height: 100%; position: absolute; left: 0; top: 0; background: url("../img/img_about_01.jpg") no-repeat center bottom / cover; .sp{ display: none; } } .contents{ width: 350px; padding: 10px 0 0 0; margin: 0 0 0 auto; .ttlBox{ margin-bottom: 55px; } .txt_01{ margin-bottom: 30px; font-size: 26px; letter-spacing: 0.15em; } .txt_02{ font-size: 14px; line-height: 2.5; } } } } @media screen and (max-width: 768px) { .contents_bg_01{ margin-bottom: 50px; .contents_01{ min-height: inherit; position: relative; >.imgBox{ width: 100%; height: auto; position: inherit; left: inherit; top: inherit; background: none; .sp{ display: block; } .pc{ display: none; } } .contents{ width: auto; padding: 10px 5% 0 5%; margin: 0 0 0 0; .ttlBox{ margin-bottom: 40px; text-align: center; } .txt_01{ margin-bottom: 10px; font-size: 26px; letter-spacing: 0.15em; text-align: center; } .txt_02{ margin-bottom: 20px; font-size: 14px; line-height: 2.5; } } } } } /*------------------------------------------ #contents_02 ------------------------------------------*/ .contents_bg_02{ padding: 100px 0; background: #efefef; .contents_02{ .ttlBox{ margin-bottom: 55px; text-align: center; } .contents{ .boxWrapper{ h3{ margin-bottom: 55px; text-align: center; font-size: 18px; font-weight: 400; color: $mainColor; } .list_01{ margin-bottom: 75px; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ margin: 0 25px 25px 0; &:nth-child(3n){ margin-right: 0px; } } } form{ max-width: 720px; margin: 0 auto; display: -ms-flex; display: flex; input[type="text"]{ -ms-flex: 1; flex: 1; height: 50px; margin: 0; padding: 0 10px; border: 1px solid #333; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; outline: none; background: #FFF; box-shadow: none; } button[type="submit"]{ margin: 0; padding: 0; width: 150px; height: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; outline: none; background: $mainColor; box-shadow: none; font-size: 18px; color: #FFF; letter-spacing: 0.1em; cursor: pointer; transition: 0.3s; &:hover{ background: $secondaryColor; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_02{ padding: 50px 0; background: #efefef; .contents_02{ .ttlBox{ margin-bottom: 40px; text-align: center; } .contents{ .boxWrapper{ padding: 0 5%; h3{ margin-bottom: 25px; text-align: center; font-size: 18px; font-weight: 400; color: $mainColor; } .list_01{ margin-bottom: 50px; display: block; li{ margin: 0 auto 25px auto; &:nth-child(3n){ margin-right: auto; } a{ width: 100%; } } } form{ max-width: 720px; margin: 0 auto; display: -ms-flex; display: flex; input[type="text"]{ -ms-flex: 1; flex: 1; height: 50px; margin: 0; padding: 0 10px; border: 1px solid #333; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; outline: none; background: #FFF; box-shadow: none; } button[type="submit"]{ margin: 0; padding: 0; width: 150px; height: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; outline: none; background: $mainColor; box-shadow: none; font-size: 18px; color: #FFF; letter-spacing: 0.1em; cursor: pointer; transition: 0.3s; &:hover{ background: $secondaryColor; } } } } } } } } /*------------------------------------------ #contents_03 ------------------------------------------*/ .contents_bg_03{ padding: 100px 0 75px 0; .contents_03{ .ttlBox{ margin-bottom: 55px; text-align: center; } .contents{ ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; li{ max-width: 310px; min-width: 310px; margin: 0 25px 25px 0; text-align: center; &:nth-child(3n){ margin-right: 0; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ padding: 50px 0 25px 0; .contents_03{ .ttlBox{ margin-bottom: 40px; text-align: center; } .contents{ padding: 0 5%; ul{ display: block; li{ max-width: 310px; min-width: inherit; margin: 0 auto 25px auto; text-align: center; &:nth-child(3n){ margin-right: auto; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } } } } } } /*------------------------------------------ #contents_04 ------------------------------------------*/ .contents_bg_04{ padding: 100px 0 50px 0; background: #efefef; .contents_04{ .ttlBox{ margin-bottom: 55px; text-align: center; } .contents{ ul{ display: -ms-flex; display: flex; -ms-justify-content: space-between; justify-content: space-between; li{ max-width: 236px; min-width: 236px; .num{ padding: 20px 0; text-align: center; line-height: 1; font-size: 26px; font-family: 'Noto Serif JP', serif; } dl{ dt{ margin-bottom: 10px; text-align: center; } dd{ font-size: 13px; line-height: 1.7; } } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ padding: 50px 0 50px 0; background: #efefef; .contents_04{ .ttlBox{ margin-bottom: 40px; text-align: center; } .contents{ padding: 0 5%; ul{ display: block; li{ max-width: inherit; min-width: inherit; &:not(:last-child){ margin-bottom: 40px; } .imgBox{ text-align: center; } .num{ padding: 20px 0; text-align: center; line-height: 1; font-size: 26px; font-family: 'Noto Serif JP', serif; } dl{ dt{ margin-bottom: 10px; text-align: center; } dd{ max-width: 400px; margin: 0 auto; font-size: 13px; line-height: 1.7; } } } } } } } } /*------------------------------------------ #contents_05 ------------------------------------------*/ .contents_bg_05{ padding: 150px 0 200px 0; .contents_05{ .contents{ .boxLR{ display: -ms-flex; display: flex; .boxL{ width: 200px; margin-right: 75px; border-right: 1px solid #d1d1d1; } .boxR{ -ms-flex: 1; flex: 1; dl{ padding: 40px 0; &:not(:last-child){ border-bottom: 1px solid #d1d1d1; } dt{ padding: 0 50px 0 0; position: relative; cursor: pointer; >span{ display: -ms-flex; display: flex; width: 23px; height: 23px; position: absolute; right: 5px; top: 50%; transform: translate(0, -50%); transition: 0.3s; >span{ width: 100%; height: 100%; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #333; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); } &:after{ transform: translate(50%, -50%) rotate(90deg); } } } } dd{ display: none; padding: 30px 0 0 0; font-size: 13px; } &.active{ dt>span{ transform: translate(0, -50%) rotate(225deg); } } } } } } } } @media screen and (max-width: 768px) { .contents_bg_05{ padding: 50px 5% 50px 5%; .contents_05{ .contents{ .boxLR{ display: block; .boxL{ width: inherit; margin: 0 0 25px 0; border-right: none; text-align: center; } .boxR{ -ms-flex: 1; flex: 1; dl{ padding: 25px 0; &:not(:last-child){ border-bottom: 1px solid #d1d1d1; } dt{ padding: 0 50px 0 0; position: relative; cursor: pointer; >span{ display: -ms-flex; display: flex; width: 23px; height: 23px; position: absolute; right: 5px; top: 50%; transform: translate(0, -50%); transition: 0.3s; >span{ width: 100%; height: 100%; position: relative; &:before, &:after{ content: ""; width: 100%; height: 1px; display: block; background: #333; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); } &:after{ transform: translate(50%, -50%) rotate(90deg); } } } } dd{ display: none; padding: 30px 0 0 0; font-size: 13px; } &.active{ dt>span{ transform: translate(0, -50%) rotate(225deg); } } } } } } } } } /*------------------------------------------ #contents_06 ------------------------------------------*/ .contents_bg_06{ margin-bottom: 80px; .contents_06{ } } @media screen and (max-width: 768px) { .contents_bg_06{ margin-bottom: 50px; .contents_06{ } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ width: 100px; position: fixed; right: 0px; bottom: 75px; display: none; z-index: 200; text-align: center; .weboubo{ display: block; margin-bottom: 20px; } } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop{ width: 60px; right: 0px; bottom: 0px; img{ width: 60px; } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 45px 5%; background: #333; text-align: center; *{ color: #FFF; font-size: 12px; } #links{ a{ display: inline-block; &:hover{ text-decoration: underline; } } } #copy{ margin-bottom: 15px; small{ } } } @media screen and (max-width: 768px) { footer { #links{ a{ } } #copy{ small{ } } } } /*------------------------------------------ モーダル ------------------------------------------*/ .modalContents{ display: none; } .modaal-container{ max-width: 100%; background: none; box-shadow: inherit; } .modaal-content-container{ padding: 0; } .modaal-outer-wrapper{ } .modaal-inner-wrapper{ } .modaal-overlay{ background: rgba(0,0,0,0.5) !important; opacity: 1 !important; z-index: 1000; } /*.modaal-inner-wrapper{ padding: 200px 0 100px 0; }*/ .modalInner{ .modaal-close.layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .box{ min-width: 980px; max-width: 980px; margin: 0 auto; padding: 0; .contents{ padding: 0; background: #FFF; .contentsInner{ position: relative; .btnCloseBox{ position: absolute; right: 10px; top: 10px; z-index: 10; cursor: pointer; } .boxLR{ display: -ms-flex; display: flex; .boxL{ width: 310px; margin-right: 45px; } .boxR{ -ms-flex: 1; flex: 1; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; .txtBox{ padding-right: 50px; h3{ margin-bottom: 30px; font-size: 22px; letter-spacing: 0.1em; } p{ margin-bottom: 20px; font-size: 13px; line-height: 2.3; } .btnBox{ } .btnCloseBox_sp{ display: none; } } } } } } } } @media screen and (max-width: 768px) { .modalInner{ .modaal-close.layer{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .box{ min-width: inherit; max-width: 980px; margin: 0 auto; padding: 0; .contents{ padding: 0; background: #FFF; .contentsInner{ position: relative; .btnCloseBox{ position: absolute; right: 10px; top: 10px; z-index: 10; cursor: pointer; display: none; } .boxLR{ display: block; .boxL{ width: 100%; padding: 0; margin-right: 0; text-align: center; img{ width: 100%; } } .boxR{ padding: 0 0 20px 0; display: block; .txtBox{ padding: 20px 5%; h3{ margin-bottom: 20px; font-size: 22px; letter-spacing: 0.1em; } p{ margin-bottom: 20px; font-size: 13px; line-height: 2.3; } .btnBox{ margin-bottom: 40px; .btn.btn_01{ width: 100%; max-width: 310px; margin: 0 auto; } } .btnCloseBox_sp{ display: block; text-align: center; } } } } } } } } } #wrapper.shisetsu{ padding: 100px 0 0 0; @media screen and (max-width: 1299px) { padding: 60px 0 0 0; } header{ .logoBox{ margin-bottom: 0; } } .mvWrapper_shisetsu{ padding: 0 50px 50px 50px; } .ttlBox_shisetsu{ margin-bottom: 45px; h2{ font-size: 24px; font-weight: 400; letter-spacing: 0.1em; text-align: center; } } .snsList{ display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; li{ &:not(:last-child){ margin-right: 10px; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } } .contents_bg_01_shisetsu{ padding: 100px 0 50px 0; background: #efefef; .contents{ >ul{ display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; >li{ max-width: 310px; min-width: 310px; margin: 0 25px 20px 0; &:nth-child(3n){ margin-right: 0; } >a{ transition: 0.3s; &:hover{ opacity: 0.7; } } .snsList{ margin-top: 10px; height: 30px; } } } } } .contents_bg_02_shisetsu{ padding: 100px 0 100px 0; .contents{ .imgBox{ margin-bottom: 15px; text-align: center; a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } .snsList{ margin-bottom: 40px; } .txtBox{ margin-bottom: 60px; .txt_01{ margin-bottom: 40px; font-size: 20px; text-align: center; } .txt_02{ font-size: 13px; line-height: 2.3; &:not(:last-child){ margin-bottom: 20px; } } ul{ margin-bottom: 20px; li{ padding: 0 0 0 1em; position: relative; font-size: 13px; line-height: 2.3; &:before{ content: "○"; position: absolute; left: 0; top: 0; } } } } } } } @media screen and (max-width: 768px) { #wrapper.shisetsu{ header{ height: 60px; padding: 0 0 0 0; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; &.fix{ height: 60px; } } .mvWrapper_shisetsu{ padding: 0 0 50px 0; } .ttlBox_shisetsu{ margin-bottom: 30px; h2{ font-size: 20px; font-weight: 400; letter-spacing: 0.1em; text-align: center; } } .snsList{ display: -ms-flex; display: flex; -ms-justify-content: center; justify-content: center; li{ &:not(:last-child){ margin-right: 10px; } a{ transition: 0.3s; &:hover{ opacity: 0.7; } } } } .contents_bg_01_shisetsu{ padding: 50px 0 50px 0; background: #efefef; .contents{ >ul{ display: block; >li{ max-width: 310px; min-width: inherit; margin: 0 auto 40px auto; &:nth-child(3n){ margin-right: auto; } &:last-child{ margin-bottom: 0; } >a{ transition: 0.3s; &:hover{ opacity: 0.7; } } .snsList{ margin-top: 10px; height: auto; } } } } } .contents_bg_02_shisetsu{ padding: 50px 0 50px 0; .contents{ .imgBox{ margin-bottom: 10px; text-align: center; } .txtBox{ margin-bottom: 50px; padding: 0 5%; .txt_01{ margin-bottom: 30px; font-size: 20px; text-align: center; } .txt_02{ font-size: 13px; line-height: 2.3; &:not(:last-child){ margin-bottom: 20px; } } ul{ margin-bottom: 20px; li{ padding: 0 0 0 1em; position: relative; font-size: 13px; line-height: 2.3; &:before{ content: "○"; position: absolute; left: 0; top: 0; } } } } } } } } /*/////////////////////アニメーション/////////////////////*/ .ani{ transition: .8s; } /* 2つ目:opacity*/ .list-mv02{ opacity: 0; -webkit-transform: translate(0,100px); -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .mv02{ opacity: 1.0; -webkit-transform: translate(0,0); }