@charset "UTF-8"; /*#container { padding-top: 15px; }*/ /* @media all and (max-width: 600px) { #home #container { padding-top: 35px; } } */ /* #intro ================================================ */ #home #intro { background-image: url("../img/home/bg_intro01-sp.png"); background-repeat: no-repeat; background-size: 272px 221px; background-position: left bottom; } #home #intro .inner { padding-bottom: 56px; } #home #intro .video { width: 100%; padding-bottom: 59.13%; background-color: #ccc; position: relative; } #home #intro .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #home #intro .video:before { content: ""; position: absolute; top: 0; left: 0; } #home #intro .picture { width: 100%;} #home #intro .txtArea { margin-top: 23px; } #home #intro .tit { color: #0097e0; font-size: 2rem; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 20px; } @supports (-webkit-background-clip: text) { #home #intro .tit { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } #home #intro .txt { padding-left: 20px; border-left: thin solid #0097e0; } @media all and (min-width: 600px) { #home #intro { background-image: url("../img/home/bg_intro01-pc.png"); background-size: auto; } #home #intro .inner { padding: 70px 0 100px; } #home #intro .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } #home #intro .box .video { width: 652px; height: 382px; padding: 0; } #home #intro .box .picture { width: 720px; height: 400px; padding: 0; } #home #intro .box .txtArea { margin-top: 8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 35px; } #home #intro .box .tit { font-size: 3rem; margin-bottom: 30px; } #home #intro .box .txt { font-size: 1.6rem; padding-left: 20px; } } /* #reason ================================================ */ #home #reason { margin-top: 129px; background-image: url("../img/home/bg_reason01-sp.png"); background-size: cover; } #home #reason .inner { padding-bottom: 27px; } #home #reason .list .item .note { color: #fff; } #home #reason .list .item { -webkit-transform: translateY(-129px); -ms-transform: translateY(-129px); transform: translateY(-129px); } #home #reason .list .item + .item { margin-top: 25px; } #home #reason .list .item a { text-decoration: none; } #home #reason .list .item dl { color: #fff; text-align: center; } #home #reason .list .item dl dt { padding-right: 20px; font-size: 1.6rem; display: inline-block; font-weight: bold; letter-spacing: 0.12em; background-image: url("../img/common/ico_arrow03.png"); background-repeat: no-repeat; background-size: 7px 10px; background-position: right 2px top 10px; margin-top: 13px; margin-bottom: 2px; } #home #reason .list .item dl dt.blank { background-image: url("../img/common/ico_blank03.png"); background-repeat: no-repeat; background-size: 10px 10px; background-position: right 2px top 10px; } @media all and (min-width: 600px) { #home #reason { position: relative; margin-top: 80px; background: none; } #home #reason:before { content: ''; display: block; position: absolute; top: 0; width: 94.8%; width: calc(100vw - 100px); min-width: 1820px; height: 100%; background-image: url("../img/home/bg_reason01-pc.png"); background-size: cover; } #home #reason .inner { padding-bottom: 27px; } #home #reason .list { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; } #home #reason .list .item { width: 360px; -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } #home #reason .list .item + .item { margin-top: 0px; margin-left: 39px; } #home #reason .list .item a:hover .img:before { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 0.8; } #home #reason .list .item a:hover .img:after { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; } #home #reason .list .item .img { position: relative; overflow: hidden; border: solid thin #0097e0;} #home #reason .list .item .img:before { position: absolute; content: ""; top: 0; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #home #reason .list .item .img:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, calc(-50% + 30px)); -ms-transform: translate(-50%, calc(-50% + 30px)); transform: translate(-50%, calc(-50% + 30px)); opacity: 0; width: 50px; height: 12px; display: block; background-image: url("../img/common/ico_arrow06.png"); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #home #reason .list .item .img.blank:after { width: 20px; height: 20px; background-image: url("../img/common/ico_blank03.png"); } #home #reason .list .item dl dt { font-size: 2rem; background-size: 8px 12px; background-position: right 1px top 13px; margin-top: 22px; margin-bottom: 14px; } #home #reason .list .item dl dt.blank { background-size: 10px 10px; background-position: right 1px top 13px; } #home #reason .list .item dl dd { font-size: 1.5rem; } } /* #series ================================================ */ #series { background-color: #fff; margin-top: -100px; } #series .inner { padding-top: 51px; } #series .head { background-image: url("../img/home/bg_series01.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; } #series .head .tit { text-align: center; font-size: 2rem; font-weight: bold; background-image: url("../img/common/ico_bar01.png"); background-repeat: no-repeat; background-size: 46px 3px; background-position: center bottom 5px; padding-bottom: 22px; } #series .box { background: url("../img/home/bg_series02-sp.png"); background-size: cover; margin: 0 -15px; padding: 0 15px 60px; margin-top: 75px; } #series .bnrs, #series .btn { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } #series .bnrs { margin-top: 20px; } #series .bnrs .bnr + .bnr { margin-top: 20px; } #series .btn { margin: 0 auto; margin-top: 25px; max-width: 325px; } #series .btn a { display: block; width: 100%; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 500; border-radius: 5px; background: url("../img/common/ico_arrow03.png"), -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: url("../img/common/ico_arrow03.png"), linear-gradient(to right, #0097e0 0%, #53b5ce 100%); background-size: 7px 10px, contain; background-position: right 13px center, 0 0; background-repeat: no-repeat; padding: 11px 0; } @media all and (min-width: 600px) { #series { margin-top: 0px; background: url("../img/home/bg_series02-pc.png"), url("../img/home/bg_series01.png"); background-size: 2120px 426px,621px; background-repeat: no-repeat; background-position: bottom right,left -25px top 50px; } #series .inner { padding-top: 51px; } #series .head { /*padding-top: 41px; padding-bottom: 31px; margin-bottom: 44px;*/ background: none; } #series .head .tit { font-size: 3rem; padding-bottom: 32px; } #series .box { max-height: 1636px; background: none; } #series .bnrs, #series .btn { -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } #series .bnrs { width: 1160px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; margin-top: 20px; } #series .bnrs .bnr { width: 560px; } #series .bnrs .bnr a { display: block; position: relative; } #series .bnrs .bnr a img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series .bnrs .bnr a:hover img { opacity: 0.6; } #series .bnrs .bnr a:before { position: absolute; content: ""; display: block; width: 100%; z-index: -1; height: 100%; background-color: #fff; } #series .bnrs .bnr + .bnr { margin-top: 0; margin-left: 40px; } #series .btn { margin-top: 100px; max-width: 360px; } #series .btn a { position: relative; font-size: 1.5rem; font-weight: 500; background: url("../img/common/ico_arrow03.png"); background-size: 8px 12px; background-position: right 23px center; background-repeat: no-repeat; padding: 17px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series .btn a:hover { background-position: right 16px center; } #series .btn a:hover:after { opacity: 0; } #series .btn a:before, #series .btn a:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series .btn a:before { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); } #series .btn a:after { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); } } @media all and (max-width: 600px) { #series .inner { padding-top: 101px; } } /* #series2 ================================================ */ #series2 { background-color: #fff; /*margin-top: -100px;*/ } #series2 .inner { padding-top: 51px; } #series2 .head { background-image: url("../img/home/bg_series01.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; } #series2 .head .tit { text-align: center; font-size: 2rem; font-weight: bold; background-image: url("../img/common/ico_bar01.png"); background-repeat: no-repeat; background-size: 46px 3px; background-position: center bottom 5px; padding-bottom: 22px; } #series2 .box { background: url("../img/home/bg_series02-sp.png"); background-size: cover; margin: 0 -15px; padding: 0 15px; margin-top: 75px; } #series2 .bnrs, #series2 .btn { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } #series2 .bnrs { margin-top: 20px; } #series2 .bnrs .bnr + .bnr { margin-top: 20px; } #series2 .btn { margin: 0 auto; margin-top: 25px; max-width: 325px; } #series2 .btn a { display: block; width: 100%; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 500; border-radius: 5px; background: url("../img/common/ico_arrow03.png"), -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: url("../img/common/ico_arrow03.png"), linear-gradient(to right, #0097e0 0%, #53b5ce 100%); background-size: 7px 10px, contain; background-position: right 13px center, 0 0; background-repeat: no-repeat; padding: 11px 0; } @media all and (min-width: 600px) { #series2 { margin-top: 0px; background: url("../img/home/bg_series02-pc.png"), url("../img/home/bg_series01.png"); background-size: 1820px 426px,621px; background-repeat: no-repeat; background-position: bottom right,left -25px top 50px; } #series2 .inner { padding-top: 51px; } #series2 .head { /*padding-top: 41px; padding-bottom: 91px; margin-bottom: 44px;*/ background: none; } #series2 .head .tit { font-size: 3rem; padding-bottom: 32px; } #series2 .box { /*max-height: 1226px;*/ background: none; } #series2 .bnrs, #series2 .btn { -webkit-transform: translateY(-80px); -ms-transform: translateY(-80px); transform: translateY(-80px); } #series2 .bnrs { width: 1160px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 auto; margin-top: 20px; } #series2 .bnrs .bnr { width: 560px; margin:auto;} #series2 .bnrs .bnr a { display: block; position: relative; } #series2 .bnrs a img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series2 .bnrs a:hover img { opacity: 0.6; } #series2 .bnrs a:before { position: absolute; content: ""; display: block; width: 100%; z-index: -1; height: 100%; background-color: #fff; } #series2 .bnrs .bnr + .bnr { margin-top: 0; margin-left: 40px; } #series2 .btn { margin-top: 100px; max-width: 360px; } #series2 .btn a { position: relative; font-size: 1.5rem; font-weight: 500; background: url("../img/common/ico_arrow03.png"); background-size: 8px 12px; background-position: right 23px center; background-repeat: no-repeat; padding: 17px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series2 .btn a:hover { background-position: right 16px center; } #series2 .btn a:hover:after { opacity: 0; } #series2 .btn a:before, #series2 .btn a:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #series2 .btn a:before { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); } #series2 .btn a:after { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); } } /* #info ================================================ */ #info { background-color: #f3f6f8; /*margin-top: 50px;*/ } #info .inner { padding-top: 44px; padding-bottom: 81px; } #info .head { text-align: center; margin-bottom: 13px; } #info .head .tit { font-size: 2rem; font-weight: bold; line-height: 1.35; margin-bottom: 0px; } #info .head .ja { color: #0097e0; font-size: 1.3rem; font-weight: bold; letter-spacing: 0.12em; } @media all and (max-width: 599px) { #info .slide { margin: 0 -15px; } } #info .slide .slick-dots li.slick-active button:before { opacity: 0.75; background-color: #0097e0; } #info .slide .slick-dots li { margin: 0 5px; width: 7px; height: 7px; } #info .slide .slick-dots li button { width: 7px; height: 7px; } #info .slide .slick-dots li button:before { width: 7px; height: 7px; content: ""; background-color: #333; border-radius: 50%; } #info .slide .slick-prev { z-index: 2!important; left: 15px; background-image: url("../img/common/ico_arrow04.png"); } #info .slide .slick-next { z-index: 2!important; right: 15px; background-image: url("../img/common/ico_arrow05.png"); } #info .slide .slick-arrow { background-size: cover; width: 25px; height: 12px; bottom: -34px; top: auto; } #info .slide .slick-arrow:before { display: none; } #info .slide .item { margin: 6px; } @media all and (min-width: 600px) { #info { background-color: #f3f6f8; /*margin-top: 99px;*/ } #info .inner { padding-top: 40px; padding-bottom: 85px; } #info .head { text-align: center; margin-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #info .head .tit { font-size: 3rem; line-height: 1.5; margin-top: 0px; margin-bottom: 0px; } #info .head .ja { position: relative; top: -2px; font-size: 1.6rem; margin-left: 20px; } #info .slide { margin: 0 -13px; } #info .slide .slick-dots li.slick-active button:before { opacity: 0.75; color: #0097e0; } #info .slide .slick-dots { bottom: -41px; } #info .slide .slick-dots li { margin: 0 7px; } #info .slide .slick-prev { right: 58px; left: auto; } #info .slide .slick-next { right: 12px; } #info .slide .slick-arrow { top: -48px; } #info .slide .item { margin: 12px; } #info .slide .item a { display: block; position: relative; } #info .slide .item a img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: auto; } #info .slide .item a:hover img { opacity: 0.6; } #info .slide .item a:before { position: absolute; content: ""; display: block; width: 100%; z-index: -1; height: 100%; background-color: #fff; } } /* #news ================================================ */ #news .inner { padding-top: 45px; } #news .head { text-align: center; margin-bottom: 13px; } #news .head .tit { font-size: 2rem; line-height: 1.2; font-weight: bold; } #news .head .ja { color: #0097e0; font-size: 1.3rem; font-weight: bold; letter-spacing: 0.12em; } #news .list .item { border-bottom: none; padding-top: 14px; padding-bottom: 19px; } #news .list .item + .item { border-top: 1px solid #e1e1e1; } #news .list .item .date { font-size: 1.3rem; line-height: 1; margin-bottom: 5px; } #news .list .item a { display: block; color: #0097e0; font-size: 1.3rem; line-height: 1.5; } #news .btn { margin: 0 auto; margin-top: 25px; max-width: 325px; } #news .btn a { display: block; width: 100%; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 500; border-radius: 5px; background: url("../img/common/ico_arrow03.png"), -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: url("../img/common/ico_arrow03.png"), linear-gradient(to right, #0097e0 0%, #53b5ce 100%); background-size: 7px 10px, contain; background-position: right 15px center, 0 0; background-repeat: no-repeat; padding: 11px 0; } @media all and (min-width: 600px) { #news .inner { padding-top: 38px; padding-bottom: 40px; position: relative; } #news .head { margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #news .head .tit { font-size: 3rem; line-height: 1.5; margin-top: 0px; margin-bottom: 0px; } #news .head .ja { position: relative; top: -2px; font-size: 1.6rem; margin-left: 28px; } #news .list .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 19px 23px; } #news .list .item .date { font-size: 1.6rem; line-height: 1; margin-bottom: 0px; margin-right: 46px; } #news .list .item .tit { position: relative; top: -2px; } #news .list .item a { font-size: 1.5rem; } #news .btn { position: absolute; top: 35px; right: 0; margin-top: 0px; width: 160px; } #news .btn a { position: relative; font-size: 1.4rem; font-weight: 500; background: url("../img/common/ico_arrow03.png"); background-size: 7px 10px; background-position: right 14px center; background-repeat: no-repeat; padding: 7px 5px 7px 0; box-sizing: border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #news .btn a:hover { background-position: right 10px center; } #news .btn a:hover:after { opacity: 0; } #news .btn a:before, #news .btn a:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #news .btn a:before { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); } #news .btn a:after { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); } } /* #home #lead ================================================ */ #home #lead .inner { padding-top: 15px; padding-bottom: 50px; } #home #lead .tit { font-size: 2rem; font-weight: 700; text-align: center; color: #0097e0; margin-top: 30px; margin-bottom: 20px; } #home #lead .secNecessary .item { margin-top: 40px; } #home #lead .secNecessary .note { margin-top: 5px; } #home #lead .secNecessary .img .noteList { margin-top: 5px; } #home #lead .secNecessary .setTit { display: flex; } #home #lead .secNecessary .setTit span { font-size: 3rem; font-weight: bold; line-height: 1; color: #0097e0; } #home #lead .necessaryText span { font-weight: 700; color: #0097e0; } @media all and (min-width: 600px) { #home #lead .inner { padding-top: 20px; padding-bottom: 20px; } #home #lead .tit { font-size: 3rem; margin-top: 50px; margin-bottom: 30px; } #home #lead .secNecessary .item { margin-top: 50px; } #home #lead .necessaryText { text-align: center; } #home #lead .secNecessary .note { /*margin-top: 10px;*/ position: absolute; letter-spacing: 0; margin-top: 345px; } } /* #home .lead ================================================ */ #home .lead .tit { font-size: 2rem; font-weight: 700; text-align: center; color: #0097e0; margin-top: 10px; margin-bottom: 20px; } #home .lead .secNecessary .item { margin-top: 40px; } #home .lead .secNecessary .note { margin-top: 5px; } #home .lead .secNecessary .img .noteList { margin-top: 5px; } #home .lead .secNecessary .setTit { display: flex; } #home .lead .secNecessary .setTit span { font-weight: bold; color: #0097e0; } #home .lead .necessaryText span { font-weight: 700; color: #0097e0; } @media all and (min-width: 600px) { #home .lead .tit { font-size: 3rem; margin-bottom: 30px; } #home .lead .secNecessary .item { margin-top: 50px; } #home .lead .necessaryText { text-align: center; } #home .lead .secNecessary .note { /*margin-top: 10px;*/ position: absolute; letter-spacing: 0; margin-top: 345px; } } /* #home #campaign ================================================ */ #home #campaign .inner { padding-bottom: 40px; } #home #campaign .tit { position: relative; text-align: center; padding-top: 15px; font-size: 2rem; font-weight: 700; line-height: 1.5; } #home #campaign .tit span { color: #0097e0; font-weight: 700; } #home #campaign .txt {font-size:.75rem; text-align: right;} @media all and (min-width: 600px) { #home #campaign .inner { padding: 0 20px; } #home #campaign .tit { padding-bottom: 40px; font-size: 3rem; } } /* 製品紹介 ================================================ */ /* #index ================================================ */ #index { /* #links ================================================ */ /* #construction ================================================ */ } @media all and (min-width: 600px) { #index { padding-bottom: 96px; } } #index #links .inner { padding-top: 42px; padding-bottom: 50px; } #index #links .box .item+.item { margin-top: 31px; } #index #links .box .item .tit { text-align: center; letter-spacing: 0.12em; font-weight: bold; font-size: 2rem; margin-bottom: 12px; } #index #links .box .item .sub { margin-top: 14px; margin-bottom: 10px; line-height: 1.6; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.12em; color: #0097e0; } #index #links .box .item .logo { width: 90%; margin: 20px auto 0; } #index #links .box .item .btn { margin: 0 auto; margin-top: 20px; } @media all and (min-width: 600px) { #index #links .inner { padding-top: 87px; padding-bottom: 80px; } #index #links .box { display: -webkit-box; display: -ms-flexbox; display: flex; } #index #links .box .item { width: 550px; } #index #links .box .item+.item { margin-top: 0px; margin-left: 60px; } #index #links .box .item .tit { font-size: 3rem; margin-bottom: 18px; } #index #links .box .item .logo { width: 50%; margin: 30px auto 0; } #index #links .box .item .sub { margin-top: 22px; margin-bottom: 17px; line-height: 1.6; font-size: 2.2rem; margin-right: -15px; } #index #links .box .item .btn { margin-top: 35px; } } #index #construction { background-color: #f3f6f8; } #index #construction .inner { padding-top: 42px; padding-bottom: 50px; } #index #construction .img { margin-top: 26px; } @media all and (min-width: 600px) { #index #construction .inner { padding-top: 68px; padding-bottom: 90px; } #index #construction .img { margin-top: 47px; } } /* FAQ ================================================ */ #faq .inner { padding-top: 42px; } #faq .list { padding-bottom: 30px; counter-reset: num; } #faq .list:last-of-type { padding-bottom: 0; } #faq .list .item { counter-increment: num; } #faq .list .item .question { position: relative; padding: 0 40px; border-bottom: 1px solid #e1e1e1; cursor: pointer; } #faq .list .item .question.is_active .clickMark:after { -webkit-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); } #faq .list .item .question .qMark { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #1874b1; font-weight: bold; font-size: 2rem; } #faq .list .item .question .qMark:before { content: "Q"counter(num) "."; } #faq .list .item .question .clickMark { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #faq .list .item .question .clickMark:before, #faq .list .item .question .clickMark:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 18px; height: 2px; background: #1874b1; } #faq .list .item .question .clickMark:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #faq .list .item .question .sub { padding: 11px 0; color: #1874b1; font-weight: bold; font-size: 1.6rem; letter-spacing: .16em; } #faq .list .item .answer { display: none; position: relative; padding: 12px 10px 10px 42px; box-sizing: border-box; } #faq .list .item .answer .aMark { position: absolute; top: 6px; left: 8px; font-weight: bold; font-size: 2rem; } #faq .list .item .answer .txt { font-size: 1.3rem; } #faq .list .item .answer .faqList .listTxt { margin-bottom: 15px; font-weight: bold; } #faq .list .item .answer .faqList .aItem { margin-bottom: 10px; } #faq .list .item .answer .aLink { color: #1874b1; line-height: 1.5; } #faq .list .item .answer .aTable { margin-top: 15px; } #faq .list .item .answer .aTable .aCap { font-weight: bold; text-align: left; } #faq .list .item .answer .aTable tr th { font-weight: bold; vertical-align: middle; padding: 15px 5px; background: #f3f6f8; text-align: center; border-bottom: 4px solid #fff; } #faq .list .item .answer .aTable tr td { vertical-align: middle; padding: 0 0 0 10px; } #faq .btn { margin: 0 auto; margin-top: 30px; } @media all and (min-width: 600px) { #faq .inner { padding-top: 67px; } #faq .list { padding-bottom: 50px; } #faq .list .item .question { padding: 0 68px; } #faq .list .item .question .qMark { font-size: 3rem; } #faq .list .item .question .clickMark { right: 30px; } #faq .list .item .question .clickMark:before, #faq .list .item .question .clickMark:after { width: 20px; } #faq .list .item .question .sub { padding: 22px 0; font-size: 2rem; letter-spacing: .12em; } #faq .list .item .answer { padding: 28px 10px 16px 68px; } #faq .list .item .answer .aMark { top: 16px; left: 10px; font-size: 3rem; } #faq .list .item .answer .txt { font-size: 1.6rem; } #faq .list .item .answer .faqList .aItem { margin-bottom: 20px; } #faq .btn { margin-top: 50px; } } /* datail ================================================ */ #detail .inner { padding-top: 42px; } #detail .box .txtArea { margin-top: 16px; } #detail .box .table table { table-layout: fixed; } #detail .box .table table tr { border-bottom: 1px solid #bbb; } #detail .box .table table th { font-size: 1.5rem; font-weight: 500; width: 112px; line-height: 1.4; box-sizing: border-box; } #detail .box .table table th, #detail .box .table table td { padding: 4px 0 4px; padding-right: 20px; } #detail .box .table table dl+dl { margin-top: 5px; } #detail .box .table table dl dt { font-size: 1.4rem; font-weight: bold; } #detail .box .table table dl dd { line-height: 1.4; } #detail .btn { margin: 0 auto; margin-top: 18px; } #detail .bnr { width: 290px; margin: 0 auto; margin-top: 40px; } @media all and (min-width: 600px) { #detail .inner { padding-top: 88px; padding-bottom: 100px; } #detail .box { display: -webkit-box; display: -ms-flexbox; display: flex; } #detail .box .img { width: 560px; } #detail .box .txtArea { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -7px; margin-left: 40px; } #detail .box .table { margin-top: -16px; } #detail .box .table table th { font-size: 1.6rem; width: 160px; } #detail .box .table table th, #detail .box .table table td { padding: 9px 0 9px; padding-right: 10px; } #detail .box .table table td>div { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 2px; } #detail .box .table table dl+dl { margin-top: 0; margin-left: 26px; } #detail .box .table table dl dt { font-size: 1.5rem; } #detail .box .table table dl dd { margin-top: 6px; font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1.6; } #detail .btn { margin-top: 51px; } #detail .bnr { width: 1000px; margin-top: 80px; } } /* #selling ================================================ */ #selling .inner { padding-top: 45px; padding-bottom: 50px; } #selling .list { margin-top: 40px; } @media all and (min-width: 600px) { #selling .inner { padding-top: 90px; padding-bottom: 80px; } #selling .list { margin-top: 50px; } } /* #layout ================================================ */ #layout .inner { padding-top: 45px; padding-bottom: 90px; } #layout .list { margin-top: 40px; } @media all and (min-width: 600px) { #layout .inner { margin-bottom: 100px; padding-top: 75px; padding-bottom: 90px; } #layout .list { margin-top: 50px; } } /* #thought ================================================ */ #thought { background: url("../img/history/bg_thought01_sp.png") no-repeat center bottom/cover; } #thought .inner { padding-top: 30px; padding-bottom: 120px; } @media all and (min-width: 600px) { #thought { background-image: url("../img/history/bg_thought01_pc.png"); } #thought .inner { padding-top: 70px; padding-bottom: 160px; } #thought .txt { text-align: center; } } /* #flow ================================================ */ #flow { background: #f3f6f8; } #flow .titNote { font-size: 1.1rem; position: relative; top: -5px; } #flow .inner { padding-top: 40px; padding-bottom: 40px; } #flow .secFlow { position: relative; } #flow .secFlow:before { content: ''; position: absolute; top: 0; left: 31px; width: 8px; height: 100%; height: calc(100% - 69px); background: #b1cfe3; } #flow .secFlow dl { position: relative; display: table; } #flow .secFlow dl:last-child:before { content: none; } #flow .secFlow dl + dl { margin-top: 25px; } #flow .secFlow dl dt { display: table-cell; width: 65px; vertical-align: top; } #flow .secFlow dl dt span { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 65px; height: 65px; background: #fff; border: 2px solid #0097e0; border-radius: 50%; color: #0097e0; font-size: 1.8rem; font-weight: 700; } #flow .secFlow dl dd { display: table-cell; padding-left: 15px; vertical-align: middle; } #flow .secFlow dl dd .tit { font-size: 1.6rem; font-weight: 700; line-height: 1.5; margin-top: -1px; } #flow .secFlow dl dd .txt { margin-top: 5px; } #flow .secFlow dl dd .img { margin-top: 15px; width: 70%; } #flow .secFlow dl dd .logo { margin-top: 15px; width: 80px; } #flow .secFlow dl dd .goods { margin-top: 15px; width: 100px; } @media all and (min-width: 600px) { #flow { background: #fff; } #flow .titNote { font-size: 1.3rem; top: -2px; } #flow .inner { padding-top: 80px; padding-bottom: 100px; } #flow .box { background: #f3f6f8; padding: 80px 70px 50px; } #flow .secFlow { margin-top: -20px; } #flow .secFlow:before { top: 50px; right: 0; left: 0; margin: 0 auto; } #flow .secFlow dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 550px; min-height: 100px; margin-left: 470px; } #flow .secFlow dl + dl { margin-top: 0; } #flow .secFlow dl dt { display: block; position: relative; width: 80px; height: 80px; margin-right: 50px; } #flow .secFlow dl dt:after { content: ''; display: inline-block; position: absolute; top: 0; right: -35px; bottom: 0; width: 20px; height: 4px; margin: auto 0; background: url("../img/history/ico_dot01.png") center center no-repeat; } #flow .secFlow dl dt span { width: 80px; height: 80px; font-size: 2.0rem; box-sizing: border-box; } #flow .secFlow dl dd { display: block; width: calc(100% - 100px); padding: 0; text-align: left; } #flow .secFlow dl dd .tit { font-size: 1.7rem; } #flow .secFlow dl dd .txt { margin-top: 6px; } #flow .secFlow dl dd .img { margin-top: 10px; width: 50%; } #flow .secFlow dl dd .right { float: right; } #flow .secFlow dl dd .logo { margin-top: 10px; width: 100px; } #flow .secFlow dl dd .goods { margin-top: 10px; width: 130px; float: right; } #flow .secFlow dl:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-left: 0; } #flow .secFlow dl:nth-child(even) dt { margin: 0 0 0 50px; } #flow .secFlow dl:nth-child(even) dt:after { right: auto; left: -35px; } #flow .secFlow dl:nth-child(even) dd { text-align: right; } } /* #case ================================================ */ #case { margin-top: 25px; } #case .set { margin-top: 50px; } #case .set .setTit { text-align: center; font-weight: 700; font-size: 1.6rem; } #case .set .setTit .num { font-size: 3rem; font-weight: bold; line-height: 1; color: #1874b1; } #case .set .setTit .note { font-size: 1.1rem; position: relative; top: -7px; } #case .set .txtWrap { margin-top: 20px; } #case .set .txtWrap .txt { margin-top: 15px; } @media all and (min-width: 600px) { #case { padding: 40px 0 0; margin: 0; } #case .tit { margin: 0; } #case .set { margin-bottom: 50px; } #case .set .setTit { font-size: 2.2rem; } #case .set .setTit .num { font-size: 4rem; } #case .set .setTit .note { font-size: 1.3rem; top: -13px; } #case .set .txtWrap { margin-top: 30px; } #case .set .txtWrap .txt { margin-top: 30px; } #case .shareList { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 50px; } #case .shareList .item { width: 550px; } #case .shareList .item img { height: 340px; } } /* お知らせ一覧 ================================================ */ /* #archive ================================================ */ #archive .inner { padding-top: 12px; padding-bottom: 50px; } @media all and (min-width: 600px) { #archive .inner { padding-top: 14px; padding-bottom: 90px; } } /* #single ================================================ */ #single .inner { padding-bottom: 50px; } @media all and (min-width: 600px) { #single .inner { padding-bottom: 100px; } } /* #about ================================================ */ #about .inner { padding-top: 30px; padding-bottom: 30px; } #about .secAbout+.secAbout { margin-top: 30px; } #about .table { margin-top: 20px; } #about table { table-layout: fixed; } #about table th, #about table td { box-sizing: border-box; border: 1px solid #e1e1e1; } #about table caption { padding: 10px 20px; font-size: 1.5rem; font-weight: 700; text-align: left; background: #f3f6f8; border: solid #e1e1e1; border-width: 1px 1px 0; } #about table tbody td { padding: 10px 5%; vertical-align: middle; } #about table .cel01 { text-align: center; font-weight: 700; } #about table .cel02 { border-right: 0; } #about table .cel02+td { border-left: 0; text-align: center; } #about table .cel03 { color: #0097e0; } #about table .bgBlue { background: #f3f6f8; } #about table .width01 { width: 33%; } #about table .width02 { width: 28%; } #about table .width03 { width: calc(100% - 33% - 28%); } #about .imgWrap { margin: 25px -6px 0 } #about .imgWrap .imgList:nth-child(odd) { margin: 20px 0 } #about .imgWrap .img { margin: 0 6px; } #about .imgWrap .imgText { margin-top: 5px; text-align: center; } #about .txtRight { text-align: right; } @media all and (min-width: 600px) { #about .inner { padding-top: 10px; padding-bottom: 20px; } #about .secAbout+.secAbout { margin-top: 50px; } #about .table { margin-top: 50px; } #about table caption { padding: 20px 30px; font-size: 2rem; } #about table tbody td { padding: 15px 10px; } #about table .cel02 { padding-left: 220px; } #about table .cel02+td { text-align: left; } #about table .width01 { width: 380px; } #about table .width02 { width: 445px; } #about table .width03 { width: 335px; } #about .imgWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 50px -20px 0; } #about .imgWrap .imgList:nth-child(odd) { margin: 0 } #about .imgWrap .img { margin: 0 20px; } } /* #proof ================================================ */ #proof .inner { padding-top: 40px; padding-bottom: 45px; } #proof .videoIn { position: relative; box-sizing: border-box; width: 100%; height: 0; padding-bottom: 56.25%; border: 4px solid #0097e0; } #proof .videoIn iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #proof .secProof+.secProof { margin-top: 40px; } #proof .secProof .sub { margin-top: 5px; color: #0097e0; font-size: 1.5rem; font-weight: 700; line-height: 1.5; } @media all and (min-width: 600px) { #proof .inner { padding-top: 70px; padding-bottom: 80px; } #proof .video { width: 550px; } #proof .secProof+.secProof { margin-top: 70px; } #proof .secProof .sub { margin-top: 10px; font-size: 1.8rem; } #proof .secProof .sub+.txt { margin-top: 10px; } } /* #measure ================================================ */ #measure .inner { padding-top: 45px; padding-bottom: 45px; } #measure .img02 { margin-top: 15px; } #measure .img02 .imgTit { padding: 10px; text-align: center; background: #0097e0; color: #fff; } #measure .img02 .imgIn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: solid #e1e1e1; border-width: 0 1px 1px; padding: 20px 7%; } #measure .img02 .imgIn img { width: 48%; } #measure .img02 .imgIn .imgTxt { padding-left: 10px; text-align: center; color: #0097e0; font-size: 1.5rem; font-weight: 700; } #measure .txt { margin-top: 10px; } #measure .txtRight { text-align: right; } @media all and (min-width: 600px) { #measure .inner { padding-top: 70px; padding-bottom: 80px; } #measure .areaImg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -30px; } #measure .img { width: calc(50% - 60px); margin: 0 30px; } #measure .img02 { margin-top: 0; } #measure .img02 .imgTit { padding: 12px; font-size: 2.2rem; } #measure .img02 .imgIn { padding: 32px 40px; } #measure .img02 .imgIn img { /* width: 230px; */ height: 212px; } #measure .img02 .imgIn .imgTxt { padding-left: 25px; font-size: 1.8rem; } #measure .txt { margin-top: 25px; } } /* #opinion ================================================ */ #opinion .inner { padding-top: 45px; padding-bottom: 30px; } #opinion .list { margin-top: 40px; } #opinion .list .sub { margin-top: 10px; font-size: 1.5rem; font-weight: 700; } #opinion .list .sub + .txt { margin-top: 10px; } @media all and (min-width: 600px) { #opinion .inner { padding-top: 90px; padding-bottom: 80px; } #opinion .list { margin-top: 55px; } #opinion .list .sub { margin-top: 20px; font-size: 1.8rem; } #opinion .list .sub + .txt { margin-top: 15px; } } /* #intro ================================================ */ #interview #intro .inner { padding-top: 48px; padding-bottom: 36px; } #interview #intro .areaIntro .img { margin-bottom: 20px; } #interview #intro .areaIntro .areaTxt .sub { margin-bottom: 8px; font-weight: bold; font-size: 1.5rem; color: #0097e0; letter-spacing: .12em; } @media all and (min-width: 600px) { #interview #intro .inner { padding-top: 70px; padding-bottom: 78px; } #interview #intro .areaIntro { display: -webkit-box; display: -ms-flexbox; display: flex; } #interview #intro .areaIntro .img { width: 50%; margin-bottom: 0; padding-right: 20px; box-sizing: border-box; } #interview #intro .areaIntro .areaTxt { width: 50%; padding-left: 20px; box-sizing: border-box; } #interview #intro .areaIntro .areaTxt .sub { margin-bottom: 16px; font-size: 1.8rem; } } /* .areaVoice ================================================ */ #interview .areaVoice { background: #f3f6f8; } #interview .areaVoice .inner { padding-top: 50px; padding-bottom: 46px; } #interview .areaVoice .list { padding-top: 50px; } #interview .areaVoice .list .item + .item { margin-top: 32px; } #interview .areaVoice .list .item .img { margin-bottom: 20px; } #interview .areaVoice .list .item .areaTxt { padding-left: 18px; border-left: 1px solid #333; box-sizing: border-box; } #interview .areaVoice .list .item .areaTxt .tit { line-height: 1.2; margin-bottom: 6px; font-weight: bold; font-size: 1.6rem; letter-spacing: .12em; } #interview .areaVoice .list .item .areaTxt .sub { line-height: 2; margin-bottom: 6px; color: #0097e0; font-weight: bold; font-size: 1.5rem; letter-spacing: .12em; } @media all and (min-width: 600px) { #interview .areaVoice .inner { padding-top: 80px; padding-bottom: 60px; } #interview .areaVoice .list { padding-top: 100px; } #interview .areaVoice .list .item { display: -webkit-box; display: -ms-flexbox; display: flex; } #interview .areaVoice .list .item:nth-of-type(odd) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } #interview .areaVoice .list .item:nth-of-type(odd) .img { margin-left: 60px; } #interview .areaVoice .list .item:nth-of-type(even) .img { margin-right: 60px; } #interview .areaVoice .list .item + .item { margin-top: 42px; } #interview .areaVoice .list .item .img { width: 50%; margin-bottom: 20px; box-sizing: border-box; } #interview .areaVoice .list .item .areaTxt { position: relative; width: 50%; padding-left: 0; border-left: none; } #interview .areaVoice .list .item .areaTxt .txtWrap { border-left: 1px solid #333; padding-left: 40px; box-sizing: border-box; } #interview .areaVoice .list .item .areaTxt .tit { line-height: 1; margin-bottom: 6px; font-size: 2.2rem; } #interview .areaVoice .list .item .areaTxt .sub { line-height: 2.4; margin-bottom: 12px; font-size: 1.8rem; } } /* .owner ================================================ */ #owner .inner { margin-top: 50px; } #owner .btn { margin: 20px auto 0 auto; } @media all and (min-width: 600px) { #owner .inner { margin-top: 100px; margin-bottom: 80px; } #owner .btn { margin: 40px auto 100px auto; } } /* #about ================================================ */ #about { margin: 50px 0 0 0; } #about .secHistory { margin-top: 25px; } #about .secHistory .historyList { display: flex; margin-top: 15px; } #about .secHistory .historyList .item { width: 280px; margin-right: 5px; } #about .secHistory .historyList .item .img { height: 115px; } #about .secHistory .historyList .item img { margin: 0 auto; } @media all and (min-width: 600px) { #about { padding: 80px 0 0; margin: 0; } #about .aboutTxt { text-align: center; } #about .secHistory { margin-top: 60px; } #about .secHistory .historyList .item { margin-right: 10px; } #about .secHistory .historyList .item .img { height: 160px; width: 90%; margin: 0 auto; } } /* #history ================================================ */ #history .historyWrap { padding: 50px 0; margin-top: 50px; } #history .historyWrap .secHistory { margin-top: 15px; } #history .historyWrap .secHistory .setTit img { display: block; margin-bottom: 5px; width: 100px; } #history .brand { margin-top: 25px; } #history .brand .brandTit { background: #0097e0; height: 65px; color: #fff; font-size: 1.6rem; font-weight: 700; text-align: center; box-sizing: border-box; padding-top: 7px; } #history .brand .brandList { background: #fff; box-sizing: border-box; padding: 20px 20px 30px 20px; } #history .brand .brandList .item .img { margin: 0 auto; } #history .brand .brandList .item .itemImg { margin: -30px auto 0 auto; } #history .brand .brandList li:first-child { border-bottom: 1px solid #333; padding-bottom: 30px; margin-bottom: 20px; } #history .brand .brandList li:first-child .img { width: 190px; } #history .brand .brandList .itemTit { color: #0097e0; font-weight: 700; } @media all and (min-width: 600px) { #history .historyWrap { padding: 100px 0; margin: 0; } #history .historyWrap .secHistory { margin-top: 60px; } #history .historyWrap .historyTxt { text-align: center; } #history .brand { margin-top: 45px; } #history .brand .brandTit { height: 80px; font-size: 2.4rem; padding-top: 23px; } #history .brand .brandList { padding: 50px 70px; display: flex; justify-content: space-between; } #history .brand .brandList li:first-child { border-bottom: none; border-right: 1px solid #333; padding: 0 165px 0 0; margin: 0 40px 0 0; } #history .brand .brandList li:first-child .img { width: 345px; } #history .brand .brandList .item .itemImg { margin: -25px auto 0 auto; } #history .brand .brandList .itemTit { font-size: 2.2rem; position: relative; } } /* #result ================================================ */ #result { padding: 50px 0; } #result .secHistory .txtWrap .setTxt { border: none; padding: 0; } #result .secHistory .setTxt .img { margin: 15px auto 0; } #result .btn { margin: 35px auto 0; } #result .resultPic { margin: 50px auto 0 auto; } @media all and (min-width: 600px) { #result { padding: 100px 0; } #result .resultPic { width: 975px; margin: 80px auto 0 auto; } #result .secHistory .txtWrap .setTxt { margin-top: 80px; } #result .secHistory .setTxt .img { margin: 30px 0 0; width: 355px; } #result .btn { margin: 60px auto 0; } } /* よくあるご質問 ================================================ */ /* #qa ================================================ */ #qa .inner { padding-top: 50px; padding-bottom: 50px; } #qa .js-switch-content, #qa .js-toggle-content { display: none; } #qa .js-switch-content.is_active, #qa .js-toggle-content.is_active { display: block; } #qa .box { counter-reset: number 0; } #qa .box .tit { margin-bottom: 0; } #qa .box .list { padding-bottom: 30px; } #qa .box .list:last-of-type { padding-bottom: 0; } #qa .box .list .item .question { position: relative; padding: 0 40px; border-bottom: 1px solid #e1e1e1; cursor: pointer; } #qa .box .list .item .question.is_active .clickMark:after { -webkit-transform: translate(-50%, -50%) rotate(0); -ms-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); } #qa .box .list .item .question .qMark { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #0097e0; font-weight: bold; font-size: 2rem; } #qa .box .list .item .question .qMark:before { counter-increment: number 1; content: "Q" counter(number) "."; } #qa .box .list .item .question .clickMark { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #qa .box .list .item .question .clickMark:before, #qa .box .list .item .question .clickMark:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 18px; height: 2px; background: #0097e0; } #qa .box .list .item .question .clickMark:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #qa .box .list .item .question .sub { padding: 11px 0; color: #0097e0; font-weight: bold; font-size: 1.6rem; letter-spacing: 0.16em; } #qa .box .list .item .answer { position: relative; padding: 12px 10px 10px 42px; box-sizing: border-box; } #qa .box .list .item .answer .aMark { position: absolute; top: 6px; left: 8px; font-weight: bold; font-size: 2rem; } #qa .box .list .item .answer .img { margin-top: 30px;margin-right: -25px;overflow-x: scroll; padding-right: 25px; } #qa .box .list .item .answer .img img{width: 700px;} #qa .box .list .item .answer .txt { font-size: 1.3rem; } #qa .box .list .item .answer .faqList .listTxt { margin-bottom: 15px; font-weight: bold; } #qa .box .list .item .answer .faqList .aItem { margin-bottom: 10px; } #qa .box .list .item .answer .aLink { color: #0097e0; line-height: 1.5; } #qa .box .list .item .answer .aTable { margin-top: 15px; } #qa .box .list .item .answer .aTable .aCap { font-weight: bold; text-align: left; } #qa .box .list .item .answer .aTable tr th { font-weight: bold; vertical-align: middle; padding: 15px 5px; background: #f3f6f8; text-align: center; border-bottom: 4px solid #fff; } #qa .box .list .item .answer .aTable tr td { vertical-align: middle; padding: 0 0 0 10px; } @media all and (min-width: 600px) { #qa .inner { padding-top: 72px; padding-bottom: 100px; } #qa .box { margin-top: -2px; padding: 60px 50px; border-width: 2px; border-style: solid; border-color: transparent #0097e0 #0097e0 #0097e0; box-sizing: border-box; } #qa .box .list { padding-bottom: 50px; } #qa .box .list .item .question { padding: 0 68px; } #qa .box .list .item .question .qMark { font-size: 3rem; } #qa .box .list .item .question .clickMark { right: 30px; } #qa .box .list .item .question .clickMark:before, #qa .box .list .item .question .clickMark:after { width: 20px; } #qa .box .list .item .question .sub { padding: 22px 0; font-size: 2rem; letter-spacing: 0.12em; } #qa .box .list .item .answer { padding: 28px 10px 16px 68px; } #qa .box .list .item .answer .aMark { top: 16px; left: 10px; font-size: 3rem; } #qa .box .list .item .answer .txt { font-size: 1.6rem; } #qa .box .list .item .answer .faqList .aItem { margin-bottom: 20px; } #qa .box .list .item .answer .img{overflow: hidden;margin-right: 0;} #qa .box .list .item .answer .img img{width: 100%;} } /* #merit ================================================ */ #merit .inner { padding-top: 45px; padding-bottom: 40px; } #merit .secMerit .sub { font-size: 1.5rem; font-weight: 700; line-height: 1.5; } #merit .secMerit .sub + .txt { margin-top: 10px; } @media all and (min-width: 600px) { #merit .inner { padding-top: 90px; padding-bottom: 70px; } #merit .secMerit .sub { font-size: 1.8rem; } #merit .secMerit .sub + .txt { margin-top: 20px; } } /* #method ================================================ */ #method .inner { padding-top: 45px; padding-bottom: 50px; } #method .titWrap { position: relative; } #method .titWrap .ico { position: absolute; top: -7px; left: auto; right: 50%; margin-right: 105px; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 45px; height: 45px; background: #0097e0; border-radius: 50%; color: #fff; font-size: 1.4rem; } #method .videoIn { position: relative; box-sizing: border-box; width: 100%; height: 0; padding-bottom: 56.25%; border: 4px solid #0097e0; } #method .videoIn iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #method .list { margin-top: 40px; } @media all and (min-width: 600px) { #method .inner { padding-top: 80px; padding-bottom: 80px; } #method .titWrap .ico { top: -6px; margin-right: 156px; width: 65px; height: 65px; font-size: 2rem; } #method .video { width: 550px; float: left; } #method .list { margin-top: 60px; } } /* #support ================================================ */ #support .inner { padding-top: 45px; padding-bottom: 50px; } @media all and (min-width: 600px) { #support .inner { padding-top: 70px; padding-bottom: 100px; } } /* #showroom ================================================ */ #showroom .inner { padding-top: 45px; padding-bottom: 50px; } #showroom .box .table table { table-layout: fixed;} #showroom .box .table table tr { border-bottom: 1px solid #bbb;} #showroom.box .table table th { font-size: 1.5rem; font-weight: 500; width: 112px; line-height: 1.4; box-sizing: border-box;} #showroom .box .table table th, #showroom .box .table table td { padding: 4px 0 4px; padding-right: 20px;} #showroom .box .table table dl+dl { margin-top: 5px;} #showroom.box .table table dl dt { font-size: 1.4rem; font-weight: bold;} #showroom .box .table table dl dd { line-height: 1.4;} @media all and (min-width: 600px) { #showroom .inner { padding-top: 50px; padding-bottom: 30px; } #showroom .box { display: -webkit-box; display: -ms-flexbox; display: flex;} #showroom .box .img { width: 360px; } #showroom .box .map {width:50%;} #showroom .box .txtArea { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -7px; margin-left: 40px;} #showroom .box .table { margin-top: -16px;} #showroom .box .table table th { font-size: 1.6rem; width: 160px; } #showroom .box .table table th, #showroom .box .table table td { padding: 9px 0 9px; padding-right: 10px; } #showroom .box .table table td>div { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 2px; } #showroom .box .table table dl+dl { margin-top: 0; margin-left: 26px; } #showroom .box .table table dl dt { font-size: 1.5rem;} #showroom .box .table table dl dd { margin-top: 6px; font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1.6;} } /* #mainImg ================================================ */ #mainImg { position: relative; } #mainImg .mvIn { height: 320px; background: url("../img/earthquake/bg_mv01-sp.png") no-repeat top right; background-size: cover; } #mainImg .mvIn .txtArea { color: #fff; margin-left: 15px; padding-top: 25%; } #mainImg .mvIn .txtArea .lead { display: inline-block; padding: 2px 13px; color: #0097e0; background: #fff; font-size: 1.2rem; font-weight: bold; } #mainImg .mvIn .txtArea .copy { margin-top: 12px; text-align: left; font-size: 3.2rem; font-weight: bold; line-height: 1.26667; letter-spacing: 0.2em; } #mainImg .mvIn .txtArea .copy .num { display: inline-block; vertical-align: middle; letter-spacing: 0.1em; line-height: 1; margin-top: -14px; font-weight: bold; font-size: 5.5rem; position: relative; top: 4px; } #mainImg .mvIn .txtArea .copy .note { font-size: 1.6rem; position: relative; top: -23px; left: -5px; } #mainImg .mvIn .txtArea .txt { width: 60%; margin-top: 20px; font-size: 1rem; letter-spacing: 0.06em; font-weight: 500; } @media all and (min-width: 600px) { #mainImg { position: relative; height: 530px; overflow: hidden; } #mainImg .mvIn { width: 100%; height: 530px; max-height: 640px; background-image: url("../img/earthquake/bg_mv01-pc.png"); background-position: center center; display: inline-block; } #mainImg .mvIn .inner { width: 1160px; margin: 0 auto; } #mainImg .mvIn .txtArea { margin-left: 0; padding-top: 134px; width: 700px; } #mainImg .mvIn .txtArea .lead { font-size: 2rem; font-weight: bold; padding: 7px 20px; } #mainImg .mvIn .txtArea .copy { margin-top: 28px; padding-left: 0; font-size: 6.4rem; } #mainImg .mvIn .txtArea .copy .num { margin-top: -20px; font-size: 9rem; } #mainImg .mvIn .txtArea .copy .note { font-size: 2.0rem; top: -45px; } #mainImg .mvIn .txtArea .txt { width: 350px; margin-top: 25px; padding-left: 0px; font-size: 1.6rem; } #mainImg .mvIn .txtArea .note { margin-top: 38px; padding-top: 7px; padding-bottom: 6px; width: 100%; font-size: 1.4rem; } } /* #voice ================================================ */ #voice .inner { padding-top: 50px; padding-bottom: 40px; } #voice .list { margin-top: 40px; } @media all and (min-width: 600px) { #voice .inner { padding-top: 100px; padding-bottom: 70px; } #voice .list { margin-top: 50px; } #voice .voiceTxt { text-align: center; } } /* #nationwide ================================================ */ #nationwide { padding-bottom: 50px; } #nationwide .txt { margin-bottom: 25px; text-align: center; } @media all and (min-width: 600px) { #nationwide { padding: 70px 0 80px; } #nationwide .txt { margin-bottom: 60px; } } /* #experiment ================================================ */ #experiment .inner { padding-top: 40px; padding-bottom: 40px; } #experiment .video { text-align: center; } #experiment .video iframe { width: 100%; max-width: 345px; height: calc(345px * 0.56); margin: auto; border: 4px solid #f39701; } #experiment .txtWrap { margin-top: 20px; } #experiment .txtWrap .txt + .txt { margin-top: 25px; } @media all and (min-width: 600px) { #experiment .inner { overflow: hidden; padding-top: 70px; padding-bottom: 80px; } #experiment .videoWrap { display: -webkit-box; display: -ms-flexbox; display: flex; } #experiment .video { width: 550px; } #experiment .video iframe { max-width: 550px; height: 308px; } #experiment .txtWrap { width: 380px; padding-left: 60px; margin-top: 0; } #experiment .txtWrap .txt + .txt { margin-top: 30px; } } #experiment .flex { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; flex-wrap: wrap;} #experiment .flex .flex-box{width:50%; vertical-align:top;} #experiment .flex .flex-box .video{margin:0 auto 10px; text-align:center} @media all and (max-width: 600px) { #experiment .flex .flex-box{width:100%;} } /* #result ================================================ */ #result { padding-top: 40px; box-sizing: border-box; } #result .tit { overflow: hidden; } #result .tit .ico { float: left; box-sizing: border-box; width: 90px; height: 90px; padding: 4px; background: #bedef7; border-radius: 50%; } #result .tit .ico span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #0097e0; background: #fff; color: #0097e0; font-size: 1.4rem; font-weight: 700; } #result .tit .txt { margin-top: 4px; padding-left: 100px; font-size: 1.6rem; font-weight: 700; line-height: 1.7; letter-spacing: 0; } #result .tit .txt span { position: relative; bottom: 5px; font-size: 1.1rem; } #result .tit + .txt { margin-top: 20px; } #result .imgWrap { padding-top: 20px; } #result .imgWrap .img01 { padding-bottom: 20px; } #result .imgWrap .img01 img { display: block; width: 275px; margin: auto; } #result .imgWrap .img02 { padding: 20px 0; border-top: 1px solid #e1e1e1; } #result .imgWrap .img02 img { display: block; width: 290px; margin: auto; } @media all and (min-width: 600px) { #result { padding-top: 80px; } #result .tit .ico { width: 120px; height: 120px; } #result .tit .ico span { border: 2px solid #0097e0; font-size: 2.2rem; } #result .tit .txt { margin-top: 34px; padding-left: 150px; font-size: 3rem; } #result .tit .txt span { bottom: 28px; } #result .tit + .txt { margin-top: 20px; } #result .imgWrap { margin-bottom: 30px; padding-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #result .imgWrap .img01 { width: 390px; padding-right: 90px; padding-bottom: 0; } #result .imgWrap .img01 img { width: 390px; margin-left: 0; } #result .imgWrap .img02 { padding-top: 0; padding-left: 90px; border-top: 0; border-left: 1px solid #e1e1e1; } #result .imgWrap .img02 img { width: 580px; } } /* #current ================================================ */ #current .inner { padding-top: 50px; padding-bottom: 50px; } #current .secVoice + .secVoice { margin-top: 40px; } @media all and (min-width: 600px) { #current .inner { padding-top: 70px; padding-bottom: 100px; margin-bottom: 100px; } #current .secVoice + .secVoice { margin-top: 50px; } #current .secVoice .btn { margin: 50px 0 0 40px; } } /* 資料請求 ================================================ */ /* #form #form { margin-top: 30px; margin-bottom: 50px; } #form .tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; width: 100%; } #form .tabs .tab { width: 50%; text-align: center; box-sizing: border-box; color: #fff; background-color: #0097e0; font-size: 1.6rem; font-weight: bold; } @media all and (max-width: 320px) { #form .tabs .tab { font-size: 1.2rem; } } #form .tabs .tab.customer { border-left: none; background-color: #96796d; } #form .tabs .tab.customer.is_active { border: 3px solid #f4ede1; border-bottom: none; color: #96796d; } #form .tabs .tab.is_active { border: 3px solid #e6f0f7; border-bottom: none; color: #0097e0; background-color: #fff; padding: 10px 0; } #form button { display: block; margin: 0 auto; margin-top: 20px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; max-width: 320px; width: 100%; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #form .formWrap .content { border: 3px solid #e6f0f7; display: none; padding: 10px; padding-bottom: 30px; } #form .formWrap .content.is_active { display: block; } #form .formWrap .content + .content { border: 3px solid #f4ede1; } #form .formWrap .content + .content .required { background-color: #d66a6e; } #form .formWrap .content + .content .mod_tit02 { border-bottom: 1px solid #96796d; } #form .formWrap .privacy { margin-top: 50px; margin-bottom: 30px; } #form .formWrap .privacy a { color: #0097e0; } @media all and (min-width: 600px) { #form { margin-top: 60px; } #form .tabs .tab { padding: 6px 0; font-size: 2.2rem; cursor: pointer; } #form .tabs .tab.is_active { padding: 20px 0; } #form button { margin-top: 50px; max-width: 320px; } #form button + button { margin-top: 20px; } #form .formWrap .content { padding: 30px; padding-top: 50px; padding-bottom: 70px; } #form .formWrap .privacy { margin-top: 90px; margin-bottom: 60px; padding: 0 10px; } } ================================================ */ /* 業界トップの低価格 ================================================ */ /* #reason ================================================ */ #reason { background-color: #f3f6f8; } #reason.is-nobg { background: none; } #reason .inner { padding-top: 42px; padding-bottom: 50px; } #reason .set + .set { margin-top: 40px; } #reason .set .setTit .num { font-size: 3rem; font-weight: bold; line-height: 1; color: #0097e0; } #reason .set .setTit .titNote {color: #333; position: relative; top: -8px; font-size: 1.1rem;} /* #reason .set .note { color: #848484; font-size: 1.1rem; margin-top: 28px; } */ #reason .areaImg { width: 90%; margin: 0 auto; padding-top: 20px; box-sizing: border-box; } @media all and (min-width: 600px) { #reason.is-padding .inner { padding-top: 84px; /*margin-bottom: 100px;*/ } #reason .inner { padding-top: 62px; /*padding-bottom: 80px;*/ } #reason .set + .set { margin-top: 60px; } #reason .set .setTit .num { font-size: 4rem; } #reason .set .setTit .titNote { top: -12px; font-size: 1.3rem;} /* #reason .set .note { font-size: 1.3rem; margin-top: 28px; } */ #reason .set .btn a { padding-left: 20px; } #reason .areaImg { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; padding-top: 30px; } #reason .areaImg .img { width: 50%; } } /* #why ================================================ */ #why { background-color: #f3f6f8; } #why.is-nobg { background: none; } #why .inner { padding-top: 22px; padding-bottom: 30px; } #why .set + .set { margin-top: 40px; } #why .set .setTit .num { font-size: 3rem; font-weight: bold; line-height: 1; color: #0097e0; } #why .set .setTit .titNote {color: #333; position: relative; top: -8px; font-size: 1.1rem;} /* #why .set .note { color: #848484; font-size: 1.1rem; margin-top: 28px; } */ #why .areaImg { width: 90%; margin: 0 auto; padding-top: 20px; box-sizing: border-box; } @media all and (min-width: 600px) { #why.is-padding .inner { padding-top: 84px; /*margin-bottom: 100px;*/ } #why .inner { padding-top: 62px; /*padding-bottom: 80px;*/ } #why .set + .set { margin-top: 60px; } #why .set .setTit .num { font-size: 4rem; } #why .set .setTit .titNote { top: -12px; font-size: 1.3rem;} /* #why .set .note { font-size: 1.3rem; margin-top: 28px; } */ #why .set .btn a { padding-left: 20px; } #why .areaImg { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; padding-top: 30px; } #why .areaImg .img { width: 50%; } } /* #example ================================================ */ #example { background-color: #f3f6f8; } #example .inner { padding-top: 36px; padding-bottom: 50px; } #example .lead { font-size: 1.5rem; font-weight: bold; letter-spacing: 0.12em; line-height: 1.5; text-align: center; } #example .list { margin-top: 26px; } #example .list .item { position: relative; padding: 0 5px; } #example .list .item + .item { margin-top: 20px; } #example .list .item .ico { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: -10px; left: -5px; width: 72px; height: 72px; z-index: 1; background-color: #0097e0; border-radius: 50%; color: #fff; } #example .list .item .ico p > span { display: block; } #example .list .item .ico p > span:first-child { font-size: 1rem; } #example .list .item .ico p > span:nth-child(2) { font-size: 1.6rem; } #example .list .item .ico p > span:nth-child(2) span { font-weight: bold; font-size: 3rem; line-height: 1; } @media all and (min-width: 600px) { #example { margin-bottom: 40px; } #example .inner { padding-top: 66px; padding-bottom: 80px; } #example .lead { font-size: 1.8rem; } #example .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 5px; } #example .list .item { width: 360px; position: relative; padding: 0 0; margin-top: 40px; } #example .list .item + .item { margin-top: 40px; margin-left: 40px; } #example .list .item:nth-child(3n) + .item { margin-left: 0; } #example .list .item .ico { top: -10px; left: -10px; width: 92px; height: 92px; } #example .list .item .ico p > span:first-child { font-size: 1.1rem; } #example .list .item .ico p > span:nth-child(2) { font-size: 1.6rem; } #example .list .item .ico p > span:nth-child(2) span { font-size: 3.6rem; } } /* #intro ================================================ */ #intro .tit span { display: inline-block; margin-bottom: 15px; font-size: 1rem; } #intro .add { font-size: 1rem; color: #a3bfd8; margin-top: 10px; } #intro .videoIn { box-sizing: border-box; position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border: 4px solid #fff; } #intro .videoIn iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } @media all and (min-width: 600px) { #intro .tit span { margin-bottom: 25px; font-size: 1.3rem; } #intro .add { font-size: 1.3rem; } #intro .videoIn { width: 660px; } #intro .box {display: flex;flex-direction: row-reverse; justify-content: space-between; } #intro .box .txtArea { width: 477px; margin-right: 24px; flex:none; } } /* #point ================================================ */ #point .inner { padding-top: 45px; padding-bottom: 30px; } #point .txtWrap .txt { position: relative; padding: 20px 0 20px 35px; } #point .txtWrap .txt + .txt { border-top: 1px solid #e1e1e1; } #point .txtWrap .txt:before { content: ''; position: absolute; top: 20px; left: 0; width: 24px; height: 24px; background: url("../img/common/ico_check02.png") no-repeat center/contain; } @media all and (min-width: 600px) { #point .inner { padding-top: 90px; padding-bottom: 80px; } #point .secPoint { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #point .img { width: 550px; } #point .txtWrap { width: 550px; } #point .txtWrap .txt { padding: 30px 0 30px 38px; } #point .txtWrap .txt:before { top: 35px; } } /* #mechanism ================================================ */ #mechanism .inner { padding-top: 45px; padding-bottom: 50px; } #mechanism .is-margin { margin: 20px auto 0; } #mechanism .secMechanism + .secMechanism { margin-top: 30px; } #mechanism .secMechanism .txtWrap .tit { overflow: hidden; color: #0097e0; } #mechanism .secMechanism .txtWrap .tit .num { float: left; display: block; padding-top: 2px; font-size: 2.5rem; font-weight: 700; line-height: 1; } #mechanism .secMechanism .txtWrap .tit .titTxt { display: block; padding-left: 45px; font-size: 1.6rem; font-weight: 700; line-height: 1.5; } #mechanism .secMechanism .txtWrap .txt { margin-top: 10px; } #mechanism .secMechanism .txtWrap .img { margin-top: 10px; } #mechanism .secMechanism .box { margin-top: 10px; padding: 20px 25px; background: #fff; font-size: 1.3rem; font-weight: 700; } #mechanism .secMechanism .video, #mechanism .secMechanism .areaImg { margin-top: 20px; } #mechanism .secMechanism .textNote { text-align: right;} @media all and (min-width: 600px) { #mechanism .inner { padding-top: 70px; padding-bottom: 80px; } #mechanism .is-margin { margin: 40px 0 0; } #mechanism .secMechanism { overflow: hidden; } #mechanism .secMechanism + .secMechanism { margin-top: 80px; } #mechanism .secMechanism .txtWrap { float: left; width: 550px; } #mechanism .secMechanism .txtWrap .tit .num { padding-top: 0; font-size: 4rem; } #mechanism .secMechanism .txtWrap .tit .titTxt { padding-left: 70px; font-size: 2.2rem; } #mechanism .secMechanism .txtWrap .txt { margin-top: 20px; } #mechanism .secMechanism .txtWrap .img { margin-top: 30px; } #mechanism .secMechanism .box { margin-top: 30px; padding: 35px 40px; font-size: 1.6rem; } #mechanism .secMechanism .video, #mechanism .secMechanism .areaImg { float: right; width: 550px; margin-top: 0; } } /* #experiment ================================================ */ #experiment .inner { padding-top: 45px; padding-bottom: 45px; } #experiment .txtWrap { margin-top: 20px; } #experiment .txtWrap .txt + .txt { margin-top: 25px; } @media all and (min-width: 600px) { #experiment .inner { padding-top: 70px; padding-bottom: 80px; } #experiment .secExperiment { overflow: hidden; } #experiment .video { width: 550px; float: left; } #experiment .txtWrap { float: right; width: 550px; margin-top: 0; } #experiment .txtWrap .txt + .txt { margin-top: 35px; } } /* #construction ================================================ */ #construction .inner { padding-top: 45px; padding-bottom: 45px; } #construction .constructionImg .textArea { text-align: center; background: #0097e0; color: #fff; font-size: 1.4rem; font-weight: 700; position: relative; margin-top: 20px; box-sizing: border-box; padding: 20px 20px 25px; } #construction .constructionImg .textArea::after { content: ''; position: absolute;display: block; background: #0097e0; transform: rotate(45deg); height: 20px; width: 20px; bottom: -10px; left: 46%; } #construction .constructionImg .textArea .note { color: #a6c4d8; } #construction .constructionImg .textArea sup.note { display: inline-block; margin-top: 2px; line-height: 1.0; vertical-align: text-top; text-indent: 0; } #construction .constructionImg .textArea p.note { display: inline-block; margin-top: 5px; text-align: left; line-height: 1.5; } #construction .constructionImg .textArea .link { width: 200px; margin: 15px auto 0; } #construction .constructionImg .textArea .link a { padding: 7px 25px 8px 10px; border: 1px solid #fff; background: none; color: #fff; } #construction .constructionImg .textArea .link a:before { right: 10px; background: url("../img/common/ico_arrow03.png") no-repeat center; background-size: contain; } #construction .constructionImg .textBox { overflow: hidden; border: 5px solid #f3f6f8; box-sizing: border-box; padding: 25px 20px; margin-top: 20px; } #construction .constructionImg .textBox .textTit { color: #0097e0; font-weight: 700; font-size: 1.6rem; line-height: 1.6; } #construction .constructionImg .textBox .textTit span.note { display: inline-block;vertical-align: text-top; line-height: 1.0; text-indent: 0; font-size: 1.1rem; } #construction .constructionImg .textBox .textTit .is_txt { color: #0097e0; } #construction .constructionList { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; } #construction .constructionList .item { width: 48%; margin-top: 10px; } @media all and (min-width: 600px) { #construction .inner { padding-top: 70px; padding-bottom: 80px; } #construction .constructionImg .textArea { width: 350px; padding: 15px 30px 25px; font-size: 1.6rem; } #construction .constructionImg .textArea sup.note { margin-top: 5px; } #construction .constructionImg .textArea .link { width: 240px; margin: 12px auto 0; } #construction .constructionImg .textArea .link a { padding: 8px 25px 9px 10px; line-height: 1.5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #construction .constructionImg .textArea .link a:before { right: 15px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #construction .constructionImg .textArea .link a:hover { color: #0097e0; background: #fff; } #construction .constructionImg .textArea .link a:hover:before { background: url("../img/common/ico_arrow01.png") no-repeat center; background-size: contain; } #construction .constructionImg .mainImg { width: 810px; float: left; margin-top: -30px; } #construction .constructionImg .imgArea { float: right; margin-bottom: 30px; } #construction .constructionImg .textBox { padding: 25px 25px 30px; margin: 0; } #construction .constructionImg .textBox .note { margin-top: 5px; } #construction .constructionImg .textBox .text { margin-top: 13px; font-size: 1.5rem; } #construction .constructionList { margin-top: 60px; clear: both; box-sizing: border-box; padding: 0 50px; } #construction .constructionList .item { width: 250px; margin: 0; } } /* #reason ================================================ */ #maintenance #reason .inner { padding-top: 40px; padding-bottom: 40px; } #maintenance #reason .box { margin-top: 40px; padding: 20px; background: #f3f6f8; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.5; } #maintenance #reason .box span { color: #0097e0; font-weight: 700; } #maintenance #reason .secExperiment { margin-top: 20px; } #maintenance #reason .secExperiment .step { position: relative; } #maintenance #reason .secExperiment .step .txt { margin-top: 7px; text-align: center; font-size: 1.4rem; } #maintenance #reason .secExperiment .step + .step { margin-top: 20px; padding-top: 40px; } #maintenance #reason .secExperiment .step + .step:before { content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #0097e0 transparent transparent transparent; } #maintenance #reason .secReason { margin-top: 40px; } @media all and (min-width: 600px) { #maintenance #reason .inner { padding-top: 90px; padding-bottom: 90px; } #maintenance #reason .box { margin-top: 50px; padding: 40px 60px; font-size: 2rem; } #maintenance #reason .secExperiment { margin-top: 40px; } #maintenance #reason .secExperiment .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #maintenance #reason .secExperiment .step { width: 540px; } #maintenance #reason .secExperiment .step .txt { margin-top: 20px; font-size: 1.6rem; } #maintenance #reason .secExperiment .step + .step { margin-top: 0; padding-top: 0; } #maintenance #reason .secExperiment .step + .step:before { top: 50%; left: -50px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); border-width: 15px 0 15px 20px; border-color: transparent transparent transparent #0097e0; } #maintenance #reason .secReason { margin-top: 50px; } } /* #posts ================================================ */ #posts {border-top: solid thin #e1e1e1;} #posts .inner { padding-top: 50px; padding-bottom: 60px; } #posts .head { text-align: center; margin-bottom: 0px; } #posts .head .tit { font-size: 2rem; line-height: 1.2; font-weight: bold; } #posts .head .ja { color: #0097e0; font-size: 1.3rem; font-weight: bold; letter-spacing: 0.12em; } #posts .item { background-color: #f3f6f8; padding: 20px 15px 14px; } #posts .item + .item { margin-top: 15px; } #posts .item .box { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #0097e0; padding-bottom: 15px; } #posts .item .box .image { float: right; width: 165px; margin-right: 9px; } #posts .item .box .image .imageIn { position: relative; box-sizing: border-box; width: 100%; height: 125px; padding-bottom: 85px; /*border: 4px solid #0097e0;*/ } #posts .item .box .image .imageIn img { position: absolute; top: 0; right: 0; width: 100% !important; height: auto !important; } #posts .item .box .image .imageIn a:hover img {opacity: 0.5;} #posts .item .box .img { width: 158px; margin-right: 9px; } #posts .item .box .txtArea { margin-top: -8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #posts .item .box .txtArea .date span { line-height: 1; font-size: 1.3rem; } #posts .item .box .txtArea .date .new { position: relative; top: -1px; margin-left: 8px; background-color: #f59a39; color: #fff; font-size: 1rem; line-height: 1; padding: 0 3px; } #posts .item .box .txtArea .tit { margin-top: 3px; font-size: 1.6rem; font-weight: normal; letter-spacing: 0.12em; line-height: 1.5; /*color: #0097e0;*/ } #posts .item .box .txtArea .tit a{text-decoration: none } #posts .item .box .txtArea .tit a:hover{opacity: 0.5;} #posts .item .desc { padding-top: 8px; } #posts .btn { margin: 0 auto; margin-top: 25px; max-width: 325px; } #posts .btn a { display: block; width: 100%; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 500; border-radius: 5px; background: url("../img/common/ico_arrow03.png"), -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: url("../img/common/ico_arrow03.png"), linear-gradient(to right, #0097e0 0%, #53b5ce 100%); background-size: 7px 10px, contain; background-position: right 13px center, 0 0; background-repeat: no-repeat; padding: 11px 0; } @media all and (min-width: 600px) { #posts .inner { padding-top: 60px; } #posts .head { margin-bottom: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #posts .head .tit { font-size: 3rem; line-height: 1.5; margin-top: 0px; margin-bottom: 0px; } #posts .head .ja { position: relative; top: -2px; font-size: 1.6rem; margin-left: 28px; } #posts .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #posts .item { background-color: #f3f6f8; padding: 0px 15px 36px; width: 360px; margin-top: 40px; box-sizing: border-box; } #posts .item + .item { margin-top: 40px; margin-right:12px; margin-left:12px; } /*#posts .item + .item:not(:nth-child(3n)) { margin-left: 40px; }*/ #posts .item .box .image { width: 360px; float: none; margin: 0 0 0 -15px; } #posts .item .box .image .imageIn { padding-bottom: 200px; /*border: 6px solid #0097e0;*/ height:270px!important; overflow-y: hidden} #posts .item .box .image .imageIn img{} #posts .item .box { display: block; border-bottom: 1px solid #0097e0; padding-bottom: 0px; } #posts .item .box .img { width: auto; margin: 0 -15px; } #posts .item .box .txtArea { margin-top: 0; padding: 15px 14px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } #posts .item .box .txtArea .date span { line-height: 1; font-size: 1.6rem; } #posts .item .box .txtArea .date .new { top: -1px; margin-left: 19px; font-size: 1.4rem; padding: 0 11px; } #posts .item .box .txtArea .tit { margin-top: 7px; font-size: 2rem; } #posts .item .desc { padding: 0 15px; padding-top: 13px; } #posts .btn { margin-top: 50px; max-width: 325px; } #posts .btn a { position: relative; font-size: 1.5rem; font-weight: 500; background: url("../img/common/ico_arrow03.png"); background-size: 8px 12px; background-position: right 23px center; background-repeat: no-repeat; padding: 17px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #posts .btn a:hover { background-position: right 16px center; } #posts .btn a:hover:after { opacity: 0; } #posts .btn a:before, #posts .btn a:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #posts .btn a:before { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); } #posts .btn a:after { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); } } /* #reason2 ================================================ */ #reason2 .inner { /*padding-top: 40px;*/ padding-bottom: 40px; } #reason2 .box { margin-top: 40px; padding: 20px; background: #f3f6f8; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.5; } #reason2 .box span { color: #1874b1; font-weight: 700; } #reason2 .secExperiment { margin-top: 20px; } #reason2 .secExperiment .step { position: relative; } #reason2 .secExperiment .step .txt { margin-top: 2px; text-align: center; font-size: 1.4rem; } #reason2 .secExperiment .step + .step { margin-top: 20px; padding-top: 40px; } #reason2 .secExperiment .step + .step:before { content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #1874b1 transparent transparent transparent; } #reason2 .secReason { margin-top: 40px; } @media all and (min-width: 600px) { #reason2 .inner { /*padding-top: 90px;*/ padding-bottom: 90px; } #reason2 .box { margin-top: 50px; padding: 40px 60px; font-size: 2rem; } #reason2 .secExperiment { margin-top: 40px; } #reason2 .secExperiment .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #reason2 .secExperiment .step { width: 540px; } #reason2 .secExperiment .step .txt { margin-top: 2px; font-size: 1.6rem; } #reason2 .secExperiment .step + .step { margin-top: 0; padding-top: 0; } #reason2 .secExperiment .step + .step:before { top: 50%; left: -50px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); border-width: 15px 0 15px 20px; border-color: transparent transparent transparent #1874b1; } #reason2 .secReason { margin-top: 50px; } } /* #hikarishokubai #mainImg ================================================ */ #hikarishokubai #mainImg { position: relative; } #hikarishokubai #mainImg .mvIn { height: 320px; background: url("/img//bg_mv01-sp.png") no-repeat top right; background-size: cover; } #hikarishokubai #mainImg .mvIn .txtArea { color: #1874b1; margin-left: 15px; padding-top: 25%; } #hikarishokubai #mainImg .mvIn .txtArea .lead { display: inline-block; padding: 2px 13px; color: #1874b1; background: #fff; font-size: 1.2rem; font-weight: bold; } #hikarishokubai #mainImg .mvIn .txtArea .copy { margin-top: 12px; text-align: left; font-size: 3.2rem; font-weight: bold; line-height: 1.26667; letter-spacing: 0.2em; } #hikarishokubai #mainImg .mvIn .txtArea .copy .num { display: inline-block; vertical-align: middle; letter-spacing: 0.1em; line-height: 1; margin-top: -14px; font-weight: bold; font-size: 5.5rem; position: relative; top: 4px; } #hikarishokubai #mainImg .mvIn .txtArea .copy .note { font-size: 1.6rem; position: relative; top: -23px; left: -5px; } #hikarishokubai #mainImg .mvIn .txtArea .txt { width: 60%; margin-top: 20px; font-size: 1rem; letter-spacing: 0.06em; font-weight: 500; } @media all and (min-width: 600px) { #hikarishokubai #mainImg { position: relative; height: 530px; overflow: hidden; } #hikarishokubai #mainImg .mvIn { width: 100%; height: 530px; max-height: 640px; background-image: url("/img/bg_mv01-pc.png"); background-position: center center; display: inline-block; } #hikarishokubai #mainImg .mvIn .inner { width: 1160px; margin: 0 auto; } #hikarishokubai #mainImg .mvIn .txtArea { margin-left: 0; padding-top: 134px; width: 700px; } #hikarishokubai #mainImg .mvIn .txtArea .lead { font-size: 2rem; font-weight: bold; padding: 7px 20px; } #hikarishokubai #mainImg .mvIn .txtArea .copy { margin-top: 28px; padding-left: 0; font-size: 6.4rem; } #hikarishokubai #mainImg .mvIn .txtArea .copy .num { margin-top: -20px; font-size: 9rem; } #hikarishokubai #mainImg .mvIn .txtArea .copy .note { font-size: 2.0rem; top: -45px; } #hikarishokubai #mainImg .mvIn .txtArea .txt { width: 350px; margin-top: 25px; padding-left: 0px; font-size: 1.6rem; } #hikarishokubai #mainImg .mvIn .txtArea .note { margin-top: 38px; padding-top: 7px; padding-bottom: 6px; width: 100%; font-size: 1.4rem; } } /* #hikarishokubai #voice ================================================ */ #hikarishokubai #voice .inner { padding-top: 50px; padding-bottom: 40px; } #hikarishokubai #voice .list { margin-top: 40px; } #hikarishokubai #voice .setTxt { margin-bottom: 40px; } @media all and (min-width: 600px) { #hikarishokubai #voice .inner { padding-top: 100px; padding-bottom: 70px; } #hikarishokubai #voice .list { margin-top: 50px; } #hikarishokubai #voice .voiceTxt { text-align: center; } } /* #hikarishokubai #nationwide ================================================ */ #hikarishokubai #nationwide { padding-bottom: 50px; } #hikarishokubai #nationwide .txt { margin-bottom: 25px; text-align: center; } @media all and (min-width: 600px) { #hikarishokubai #nationwide { padding: 70px 0 80px; } #hikarishokubai #nationwide .txt { margin-bottom: 60px; } } /* #hikarishokubai #experiment ================================================ */ #hikarishokubai #experiment .inner { padding-top: 40px; padding-bottom: 40px; } #hikarishokubai #experiment .video { text-align: center; } #hikarishokubai #experiment .video iframe { width: 100%; max-width: 345px; height: calc(345px * 0.56); margin: auto; border: 4px solid #1874b1; } #hikarishokubai #experiment .txtWrap { margin-top: 20px; } #hikarishokubai #experiment .txtWrap .txt + .txt { margin-top: 25px; } @media all and (min-width: 600px) { #hikarishokubai #experiment .inner { overflow: hidden; padding-top: 70px; padding-bottom: 80px; } #hikarishokubai #experiment .videoWrap { display: -webkit-box; display: -ms-flexbox; display: flex; } #hikarishokubai #experiment .video { width: 550px; } #hikarishokubai #experiment .video iframe { max-width: 550px; height: 308px; } #hikarishokubai #experiment .txtWrap { width: 380px; padding-left: 60px; margin-top: 0; } #hikarishokubai #experiment .txtWrap .txt + .txt { margin-top: 30px; } } /* #hikarishokubai #result ================================================ */ #hikarishokubai #result { padding-top: 40px; box-sizing: border-box; } #hikarishokubai #result .tit { overflow: hidden; } #hikarishokubai #result .tit .ico { float: left; box-sizing: border-box; width: 90px; height: 90px; padding: 4px; background: #bedef7; border-radius: 50%; } #hikarishokubai #result .tit .ico span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; border: 4px solid #1874b1; background: #fff; color: #1874b1; font-size: 1.4rem; font-weight: 700; } #hikarishokubai #result .tit .txt { margin-top: 4px; padding-left: 100px; font-size: 1.6rem; font-weight: 700; line-height: 1.7; letter-spacing: 0; } #hikarishokubai #result .tit .txt span { position: relative; bottom: 5px; font-size: 1.1rem; } #hikarishokubai #result .tit + .txt { margin-top: 20px; } #hikarishokubai #result .imgWrap { padding-top: 20px; } #hikarishokubai #result .imgWrap .img01 { padding-bottom: 20px; } #hikarishokubai #result .imgWrap .img01 img { display: block; width: 275px; margin: auto; } #hikarishokubai #result .imgWrap .img02 { padding: 20px 0; border-top: 1px solid #e1e1e1; } #hikarishokubai #result .imgWrap .img02 img { display: block; width: 290px; margin: auto; } @media all and (min-width: 600px) { #hikarishokubai #result { padding-top: 80px; } #hikarishokubai #result .tit .ico { width: 120px; height: 120px; } #hikarishokubai #result .tit .ico span { border: 2px solid #1874b1; font-size: 2.2rem; } #hikarishokubai #result .tit .txt { margin-top: 34px; padding-left: 150px; font-size: 3rem; } #hikarishokubai #result .tit .txt span { bottom: 28px; } #hikarishokubai #result .tit + .txt { margin-top: 20px; } #hikarishokubai #result .imgWrap { margin-bottom: 30px; padding-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #hikarishokubai #result .imgWrap .img01 { width: 390px; padding-right: 90px; padding-bottom: 0; } #hikarishokubai #result .imgWrap .img01 img { width: 390px; margin-left: 0; } #hikarishokubai #result .imgWrap .img02 { padding-top: 0; padding-left: 90px; border-top: 0; border-left: 1px solid #e1e1e1; } #hikarishokubai #result .imgWrap .img02 img { width: 580px; } } /* #hikarishokubai #current ================================================ */ #hikarishokubai #current .inner { padding-top: 50px; padding-bottom: 50px; } #hikarishokubai #current .secVoice + .secVoice { margin-top: 40px; } @media all and (min-width: 600px) { #hikarishokubai #current .inner { padding-top: 70px; padding-bottom: 100px; margin-bottom: 100px; } #hikarishokubai #current .secVoice + .secVoice { margin-top: 50px; } #hikarishokubai #current .secVoice .btn { margin: 50px 0 0 40px; } } /* #necessary ================================================ */ #necessary .inner { padding-top: 45px; padding-bottom: 50px; } #necessary .tit { font-size: 2rem; font-weight: 700; text-align: center; color: #1874b1; margin-top: 30px; margin-bottom: 20px; } #necessary .secNecessary .item { margin-top: 40px; } #necessary .secNecessary .note { margin-top: 5px; } #necessary .secNecessary .img .noteList { margin-top: 5px; } #necessary .secNecessary .setTit { display: flex; } #necessary .secNecessary .setTit span { font-size: 3rem; font-weight: bold; line-height: 1; color: #1874b1; } #necessary .necessaryText { margin-bottom: 1em; } #necessary .necessaryText span { font-weight: 700; color: #1874b1; } @media all and (min-width: 600px) { #necessary .inner { padding-top: 80px; padding-bottom: 40px; } #necessary .tit { font-size: 3rem; margin-top: 50px; margin-bottom: 30px; } #necessary .secNecessary .item { margin-top: 50px; } #necessary .necessaryText { text-align: center; } #necessary .secNecessary .note { margin-top: 10px; position: absolute; letter-spacing: 0; margin-top: 345px; } } /* #more ================================================ */ #more .inner { padding-bottom: 40px; } #more .tit { position: relative; text-align: center; padding-top: 50px; font-size: 2rem; font-weight: 700; line-height: 1.5; } #more .tit span { color: #1874b1; font-weight: 700; font-size:1.3em; } #more .tit:before { content: ''; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 25px 25px 0 25px; border-color: #1874b1 transparent transparent transparent; } #more .secMore { position: relative; margin-top: 25px; } #more .secMore+.secMore { margin-top: 70px; } #more .secMore+.secMore:before, #more .secMore+.secMore:after { content: ''; position: absolute; top: -40px; left: 50%; width: 40px; height: 4px; background: #01b4ed; } #more .secMore+.secMore:before { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #more .secMore+.secMore:after { -webkit-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } #more .secMore .img { text-align: center; } #more .secMore .img01 img { width: 222px; } #more .secMore .img02 img { width: 210px; } #more .secMore .txt { margin-top: 15px; } @media all and (min-width: 600px) { #more .inner { padding: 40px 60px; } #more .tit { padding-top: 80px; font-size: 3rem; } #more .tit:before { border-width: 50px 50px 0 50px; } #more .secWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 150px; } #more .secMore { position: relative; margin-top: 50px; width: 380px; } #more .secMore+.secMore { margin-top: 50px; } #more .secMore+.secMore:before, #more .secMore+.secMore:after { top: 230px; left: -100px; width: 84px; height: 8px; } #more .secMore+.secMore:before { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #more .secMore+.secMore:after { -webkit-transform: translate(0, 0) rotate(90deg); -ms-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); } #more .secMore .img { height: 400px; } #more .secMore .img01 img { width: auto; height: 100%; } #more .secMore .img02 img { width: auto; height: 100%; } #more .secMore .txt { margin-top: 35px; } } #home #more .tit { padding-top: 20px; } #home #more .tit:before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-style: none; border-width: 0; } .covidbox.d-flex { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .covidbox { margin: 20px auto; border: 1px solid #ccc; box-sizing: border-box; padding: 15px; } .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .gray-title { font-family: "SourceHanSerif-Medium"; font-size: 1.8rem; letter-spacing: .1em; background-color: #ddd8d2; margin-bottom: 1rem; text-transform: uppercase; padding: .2rem .5rem; } .covidbox ul { font-size: 1.4rem; padding-left: 20px; padding-bottom: 20px; list-style-type: disc; } @media all and (min-width: 600px) { .covidbox div { width: 48%; } } #attention .btn { margin: 0 auto; margin-top: 25px; max-width: 325px; } #attention .btn a { display: block; width: 100%; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; font-weight: 500; border-radius: 5px; background: url("../img/common/ico_arrow03.png"), -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: url("../img/common/ico_arrow03.png"), linear-gradient(to right, #0097e0 0%, #53b5ce 100%); background-size: 7px 10px, contain; background-position: right 13px center, 0 0; background-repeat: no-repeat; padding: 11px 0; } @media all and (min-width: 600px) { #attention .btn { max-width: 540px; } #attention .btn a { position: relative; font-size: 1.5rem; font-weight: 500; background: url("../img/common/ico_arrow03.png"); background-size: 8px 12px; background-position: right 23px center; background-repeat: no-repeat; padding: 17px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #attention .btn a:hover { background-position: right 16px center; } #attention .btn a:hover:after { opacity: 0; } #attention .btn a:before, #attention .btn a:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; border-radius: 5px; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #attention .btn a:before { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); } #attention .btn a:after { background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); } } /*wp-pagenavi 07*/ .wp-pagenavi { clear: both; text-align:center; } .wp-pagenavi a, .wp-pagenavi span { display: inline-block; color: #fff; background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% ); background:-ms-linear-gradient( top, #3d94f6 5%, #1e62d0 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0'); background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3d94f6), color-stop(100%, #1e62d0) ); background-color:#3d94f6; border:1px solid #3d94f6; padding: 8px 15px; margin: 10px 2px; white-space: nowrap; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; text-align: center; text-decoration:none; } .wp-pagenavi a:hover{ display: inline-block; color:#3d94f6; background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) ); background-color:#dfdfdf; } .wp-pagenavi span.current{ display: inline-block; color: #FFF; background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% ); background:-ms-linear-gradient( top, #1e62d0 5%, #3d94f6 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6'); background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #1e62d0), color-stop(100%, #3d94f6) ); background-color:#1e62d0; border-color: #3d94f6; font-weight: bold; } .flex_column{ display: flex; justify-content: space-between; flex-wrap: wrap;} .flex_column:after{ content:""; display:block; width: 30%; height:0; } .flex_column li{ width: 30%; padding:10px; text-align:center; } .flex_column li img{ } @media screen and (max-width:768px) { .flex_column li{ width: 100%; } } #home h2.tit span { background: linear-gradient(transparent 60%, #FFC222 60%); font-weight: bold; } #home .section_lead { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; text-align:center; font-weight: bold; font-size: 30px; line-height: 150%; margin-bottom: 50px;} #home .section_lead span { background: linear-gradient(transparent 60%, #FFC222 60%); font-weight: bold; } @media all and (max-width: 767px){ .section_lead { margin: 0 15px 20px; } } #support .txtWrap ul li { background-image: url(/img/check.png); background-repeat: no-repeat; background-position: left center; padding-left:36px;}