@charset "UTF-8";
@charset "utf-8";


@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&display=swap");
html{
font-size: 16px;
}
body {
font-size: 1rem !important;
line-height: 1.8 !important;
font-family: 'Noto Sans JP', sans-serif !important;
color: #000 !important;
font-weight: 400 !important;
letter-spacing: 0.5px;
text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important; 
-moz-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-o-text-size-adjust: 100% !important;
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::after, *::before {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
main {
display: block;
}
a:hover, a:focus, a:visited {
outline: none;
border: none;
}
a {
text-decoration: none;
color: inherit;
}
.clear {
clear: both;
}
a[href^="tel:"] {
cursor: default;
}
a[href^="tel:"]:hover {
text-decoration: none;
}
br {
font-size: 0;
}
.anchor_fixtop {
display: block;
position: relative;
top: -80px; 
width: 100%;
visibility: hidden;
}
.hv-o:hover {
opacity: .7;
}
.fx {
transition: .3s ease;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.active{
text-decoration: underline;
}
.br-sp{
display: none;
}
.br-pc{
display: block;
}
.i-b {
display: inline-block;
}
.cont-1500{
max-width: 1500px;
width: 100%;
margin: auto;
}
#pagetop {
z-index: 999;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px;
color: #fff;
border: none;
outline: none;
background: rgb(132,208,198);
background: linear-gradient(90deg, rgba(132,208,198,1) 0%, rgba(76,156,235,1) 100%);
}
#pagetop:hover{
opacity: 0.7;
}
.anchor_fixtop {
width: 100%;
display: block;
position: relative;
top: -90px;
visibility: hidden;
} .hd{
padding-bottom: 1.375rem;
}
.hd.flex{
justify-content: space-between;
}
.logo{
padding-left: 3.958vw;
}
.hd h1{
line-height: 1;
font-size: 1rem;
padding-left: 3.958vw;
font-weight: bold;
margin-bottom: 0.625rem;
color: #101010;
}
.hd-left{
padding-top: 1.5rem;
}
.hd-right{
text-align: right;
}
.txt-big-btn{
font-size: 1.625rem;
position: relative;
margin-left: 20px;
}
.txt-small-btn{
font-size: 1.125rem;
position: relative;
}
.txt-big-btn::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/cirlce-y.png) no-repeat;
width: 50px;
height: 50px;
left: -70px;
top: -6px;
}
.txt-small-btn::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/icon-btn.png) no-repeat;
width: 9px;
height: 14px;
right: -27px;
top: 6px;
}
.photo-btn{
margin-bottom: 5px;
}
.bg-ra{
background: rgb(32,156,255);
background: linear-gradient(90deg, rgba(32,156,255,1) 0%, rgba(79,173,211,1) 100%);
}
.hd-btn{
border-radius: 0 0 0 10px;
display: inline-block;
}
.hd-btn a{
width: 100%;
height: 100%;
display: block;
padding: 9px 2.813rem 9px 4.063rem;
color: #fff;
font-weight: 600;
}
.menu{
padding-left: 0;
padding-right: 3.021vw;
margin-bottom: 0;
margin-top: 12px;
display: none;
}
.menu li{
list-style: none;
padding: 0 1.063rem;
font-weight: 600;
}
.menu li a:hover{
color: #000;
opacity: 0.7;
}
.toggle{
display: none;
}
.cont-1350{
max-width: 1350px;
width: 100%;
margin: auto;
}
.ft-bg{
padding-bottom: 12px;
background: rgb(192,242,235);
background: linear-gradient(90deg, rgba(192,242,235,1) 0%, rgba(162,214,255,1) 100%);
}
.ft{
padding: 4.25rem 0 3.75rem;
background: #fff;
}
.ft .flex{
align-items: flex-end;
justify-content: space-between;
}
.logo-txt{
color: #101010;
font-weight: bold;
margin-bottom: 7px;
}
.ft-btn{
border-radius: 30px;
color: #fff;
display: inline-block;
}
.ft-btn a{
width: 100%;
height: 100%;
display: block;
padding: 9px 58px 9px 85px;
font-weight: bold;
}
.ft-btn a:hover{
color: #fff;
}
.txt-ft-big-btn{
font-size: 1.438rem;
position: relative;
}
.txt-ft-big-btn::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/cirlce-y-3.png) no-repeat;
width: 52px;
height: 52px;
left: -67px;
top: -8px;
}
.txt-ft-small-btn{
font-size: 1.188rem;
position: relative;
}
.txt-ft-small-btn::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/icon-btn.png) no-repeat;
width: 9px;
height: 14px;
right: -27px;
top: 6px;
}
.copyright{
background: #232323;
color: #fff;
font-size: 0.75rem;
padding: 2.063rem;
} .main-photo{
position: relative;
}
.main-photo img{
width: 100%;
}
.main-txt{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
width: 100%;
}
.txt-top-1{
color: #2687cc;
font-size: 1.625rem;
font-weight: 700;
padding-bottom: 8px;
}
.txt-top-2{
color: #232323;
font-size: 2.75rem;
font-weight: 700;
line-height: 1.5;
}
.txt-line{
position: relative;
}
.txt-line::before{
position: absolute;
content: '';
background: #f6ff05;
width: 100%;
height: 11px;
bottom: 2px;
z-index: -1;
}
.big-num{
font-size: 3.375rem;
}
.txt-top-3{
color: #232323;
text-align: center;
font-size: 1.25rem;
padding-top: 14px;
padding-bottom: 1.688rem;
}
.main-btn{
border-radius: 38px;
border: 2px solid #fff;
}
.main-btn a{
padding: 8px 70px 14px 87px;
}
.main-btn .txt-big-btn::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/cirlce-y-2.png) no-repeat;
width: 66px;
height: 66px;
left: -86px;
top: -10px;
}
.main-btn .txt-small-btn::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/icon-btn-2.png) no-repeat;
width: 11px;
height: 18px;
right: -27px;
top: 10px;
}
.main-btn .txt-big-btn{
font-size: 1.875rem;
}
.main-btn .txt-small-btn{
font-size: 1.5rem;
}
.btn-sp{
display: none;
}
@media screen and (max-width: 767px) {
html{
font-size: 14px;
}
}
@media screen and (max-width: 1443px) {
.menu li{
padding: 0 5px;
}
.logo, .hd h1 {
padding-left: 0.958vw;
}
}
@media screen and (max-width: 1350px) {
.cont-1350{
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 1247px) {
.hd-left {
padding-top: 10px;
}
.hd-right .hd-btn{
margin-right: 4.25rem;
}
.hd-right .hd-btn a{
padding: 6px 2.813rem 7px 4.063rem;
}
.toggle{
background: linear-gradient(90deg, rgba(32,156,255,1) 0%, rgba(79,173,211,1) 100%);
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
.toggle img{
width: 30px;
height: 30px;
}
.menu{
display: none;
position: absolute;
z-index: 999;
width: 100%;
background: linear-gradient(90deg, rgba(32,156,255,1) 0%, rgba(79,173,211,1) 100%);
left: 0;
top: 60px;
text-align: center;
color: #fff;
padding-right: 0;
margin-top: 0;
}
.menu a{
width: 100%;
border-bottom: 1px dotted #fff;
padding: 10px;
display: block;
}
.txt-top-2{
font-size: 2rem;
}
.big-num{
font-size: 3rem;
}
}
@media screen and (max-width: 1033px) {
.main-photo img{
height: 450px;
object-fit: cover;
}
}
@media screen and (max-width: 992px) {
.copyright{
padding: 1rem;
}
}
@media screen and (max-width: 847px) {
.hd-right .hd-btn {
margin-right: 3.7rem;
}
}
@media screen and (max-width: 839px) {
.hd-right .txt-big-btn::before{
left: -56px;
top: -7px;
}
.hd-right .hd-btn {
margin-right: 3.55rem;
}
.hd-right .txt-big-btn{
margin-left: 0;
font-size: 1.375rem;
}
.hd-right .txt-small-btn::before{
right: -14px;
}
.hd-right .hd-btn a {
padding: 8px 2.413rem 10px 3.8rem;
}
.toggle{
padding: 14px;
}
.menu{
top: 58px;
}
.main-txt{
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 780px) {
.hd-right .hd-btn {
margin-right: 2.4rem;
}
.ft{
padding: 1.875rem 0;
}
.logo-ft{
width: 100%;
text-align: center;
padding-bottom: 1.875rem;
}
.ft-btn{
width: 100%;
max-width: 426px;
margin: auto;
height: 60px;
text-align: center;
}
.txt-ft-big-btn::before{
top: -10px;
}
.ft-btn a{
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 768px) {
.txt-ft-big-btn::before{
left: -58px;
top: -8px;
}
}
@media screen and (max-width: 767px) {
.hd-right .hd-btn{
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin-right: 0;
text-align: center;
border-radius: 0;
display: none;
}
.main-photo img{
height: 330px;
}
.txt-top-2,.big-num, .txt-top-1, .main-btn .txt-big-btn {
font-size: 1.25rem;
}
.txt-top-3, .main-btn .txt-small-btn{
font-size: 1rem;
}
.txt-line::before{
height: 4px;
}
.main-btn{
width: 100%;
}
.main-btn a {
padding: 10px 0;
}
.main-btn .txt-big-btn::before{
background-size: contain;
width: 41px;
height: 41px;
left: -49px;
top: -6px;
}
.main-btn .txt-small-btn::before{
top: 2px;
}
.hd-right .txt-big-btn::before {
top: -9px;
}
.btn-sp{
display: block;
text-align: center;
position: fixed;
width: 100%;
color: #fff;
bottom: 0;
z-index: 99;
}
.btn-sp a{
padding: 8px 0 12px;
display: inline-block;
width: 100%;
}
.btn-sp a:active{
color: #fff;
}
html{
padding-bottom: 56px;
}
#pagetop{
padding: 7px;
bottom: 65px;
right: 10px;
}
}
@media screen and (max-width: 427px) {
html{
padding-bottom: 54px;
}.btn-sp a {
padding: 13px 0 16px;
}
.txt-ft-big-btn{
font-size: 1rem;
}
.txt-ft-small-btn{
font-size: 0.875rem;
}
.ft-btn a{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding-left: 20px;
}
.txt-ft-small-btn::before{
top: 4px;
}
.txt-ft-big-btn::before {
top: -13px;
}
}
@media screen and (max-width: 374px) {
.hd h1{
font-size: 12px;
}
.txt-top-2, .big-num, .txt-top-1, .main-btn .txt-big-btn{
font-size: 1rem;
}
.main-btn .txt-big-btn::before{
top: -10px;
}
.logo{
width: 80%;
}
.hd-right .txt-big-btn{
font-size: 1rem;
}
.txt-small-btn{
font-size: 0.875rem;
}
}  .sec-1{
padding: 3.563rem 0;
position: relative;
}
.sec-1::before {
position: absolute;
content: '';
background: rgb(192,242,235);
background: linear-gradient(90deg, rgba(192,242,235,1) 0%, rgba(162,214,255,1) 100%);
height: 330px;
width: 100%;
left: 0;
bottom: 0;
}
.tlt-1{
font-size: 2.125rem;
font-weight: 800;
line-height: 1.6;
}
.color-1{
color: #4baab3;
}
.color-2{
color: #4fadd3;
}
.txt-mid{
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.75rem;
color: #232323;
}
.txt-nor{
font-size: 1.125rem;
line-height: 2;
margin-bottom: 0;
color: #232323;
}
.slide{
padding-top: 2rem;
}
.slide .owl-carousel .owl-stage{
display: flex;
}
.slide .owl-theme .owl-nav{
width: 100%;
margin-top: 0;
display: block !important;
}
.slide .owl-carousel .owl-nav button{
top: 50%;
transform: translateY(-50%);
font-size: 0 !important;
position: absolute;
width: 38px;
height: 139px;
margin: 0;
}
.slide .owl-carousel .owl-nav button.owl-next{
right: 0;
background-image: url(//websae.co.jp/bento/img/next-slide.png) !important;
}
.slide .owl-carousel .owl-nav button.owl-prev{
left: 0;
background-image: url(//websae.co.jp/bento/img/prev-slide.png) !important;
}
.slide .owl-item{
background: #f2f0f0;
padding: 10px 10px 12px 10px;
border-radius: 10px;
}
.photo-slide{
position: relative;
display: block;
}
.photo-slide img{
border-radius: 10px 10px 0 0;
}
.photo-slide::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/exam-02.png) no-repeat;
width: 52px;
height: 52px;
left: 0;
right: 0;
margin: auto;
bottom: -26px;
}
.article-nav-category {
width: 100%;
position: relative;
text-align: left;
display: inline-block;
margin-left: 10px;
margin-top: 22px;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
font-weight: 700;
color: #333;
}
.article-nav-category span {
background-color: #fff;
padding: 6px 10px 4px 10px;
display: inline-block;
min-width: 90px;
margin: 1em 16px 5px 0;
background-color: #f3bb13;
color: #fff;
border-radius: 4px;
text-align: center;
}
.article-nav-ttl {
clear: both;
margin-top: 0;
text-align: left;
padding: 9px 10px;
color: #333;
display: inline-block !important;
font-weight: bold;
width: 100%;
}
.article-nav-desc {
font-size: 14px;
color: #333;
letter-spacing: 0;
font-weight: 400;
text-align: right;
display: inline-block !important;
padding: 0 10px 10px;
width: 100%;
}
.cont-1020{
max-width: 1020px;
width: 100%;
margin: auto;
}
.tlt-2{
font-size: 1.875rem;
font-weight: 800;
line-height: 1.6;
}
.sec-2{
padding-top: 4.813rem;
padding-bottom: 10rem;
}
.sec-2 .txt-nor{
padding-top: 8px;
padding-bottom: 1.875rem;
}
.box-ra{
border-radius: 31px;
padding: 5px;
background: rgb(192,242,235);
background: linear-gradient(90deg, rgba(192,242,235,1) 0%, rgba(162,214,255,1) 100%);
}
.sec-2 .box-ra{
background: rgb(132,208,198);
background: linear-gradient(90deg, rgba(132,208,198,1) 0%, rgba(76,156,235,1) 100%);
}
.bg-w{
background: #fff;
padding: 1.875rem 0;
border-radius: 26px;
}
.cont-check{
max-width: 900px;
width: 100%;
margin: auto;
}
.check-left, .check-right{
padding: 0;
}
.check-left{
padding-top: 6px;
}
.check-txt{
position: relative;
font-size: 1.25rem;
margin-bottom: 0;
padding-left: 2.5rem;
letter-spacing: 0;
color: #232323;
font-weight: bold;
}
.check-txt::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/icon-check.png) no-repeat;
width: 24px;
height: 22px;
left: 0;
top: 8px;
}
.sec-3{
position: relative;
padding: 3.25rem 0 5.5rem;
z-index: 2;
}
.sec-3::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/img-sec-3.png) no-repeat;
background-position: center;
width: 100%;
max-width: 529px;
height: 190px;
top: -2px;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
.sec-3::after {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/ans.png) no-repeat;
width: 280px;
height: 72px;
top: -46px;
left: 0;
right: 0;
margin: auto;
}
.sec-3.box-ra{
border-radius: 0;
}
.tlt-3{
font-size: 2.5rem;
line-height: 1.4;
color: #232323;
font-weight: 700;
margin-bottom: 0;
}
.cont-1200{
max-width: 1200px;
width: 100%;
margin: auto;
}
.box-ans{
position: relative;
background: rgba(255,255,255,0.65);
padding: 5rem 0 3.938rem;
margin-top: 2.5rem;
border-radius: 20px;
}
.photo-ans{
position: absolute;
right: -80px;
top: -53px;
}
.num-list{
position: relative;
font-size: 1.25rem;
font-weight: 600;
line-height: 2;
padding-left: 1.875rem;
margin-bottom: 0;
display: block;
color: #232323;
}
.num-list:hover{
opacity: 0.7;
color: #232323;
cursor: pointer;
}
.sec-3 .part{
counter-reset: ans;
padding-top: 3.875rem;
}
.num-list::before{
counter-increment: ans;
content: counter(ans);
position: absolute;
color: #fff;
background: #4babb3;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 1.25rem;
left: -13px;
top: 6px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
.sec-4 .part-1{
padding-top: 4.188rem;
padding-bottom: 4rem;
}
.tlt-4{
font-size: 2rem;
color: #232323;
line-height: 1.3;
font-weight: 700;
border-bottom: 3px solid #4babb3;
align-items: center;
padding-left: 3.125vw;
padding-bottom: 2.125rem;
margin-bottom: 2.375rem;
}
.tlt-text{
padding-top: 15px;
}
.tlt-num{
font-weight: 400;
color: #4babb3;
transform: skewX(-9deg);
display: block;
font-size: 6.25rem;
line-height: 1;
margin-right: 1.640vw;
font-family: 'Oswald', sans-serif;
}
.cont-900{
max-width: 900px;
width: 100%;
margin: auto;
}
.tlt-5{
font-size: 1.5rem;
line-height: 1.6;
font-weight: 700;
color: #232323;
}
.photo-center{
padding-bottom: 3.125rem;
}
.content-text{
margin-bottom: 0;
font-size: 1.063rem;
line-height: 2.2;
color: #232323;
letter-spacing: 0;
padding-top: 0.813rem;
}
.txt-line-2{
font-weight: bold;
background: linear-gradient(transparent 67%, #fcff07 0%);
}
.sec-4 .part-2{
background: #f4fefe;
padding-top: 4.188rem;
padding-bottom: 2.25rem;
}
.sub-box{
border-radius: 20px;
border: 2px solid #4babb3;
margin-bottom: 2.75rem;
}
.sub-box-1{
margin-top: 3.125rem;
}
.tlt-6{
color: #fff;
font-size: 1.75rem;
line-height: 1.4;
background: #4babb3;
border-radius: 16px 16px 0 0;
margin-bottom: 0;
padding: 0.75rem 0;
font-weight: 500;
}
.txt-sub-box{
margin-bottom: 0;
padding: 1.25rem 3.125rem 3.75rem;
background: #fff;
border-radius: 0 0 17px 17px;
}
.bento-copy {
background-image: url(//websae.co.jp/bento/img/common/bento-copy-bg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 30px;
}
.txt-color{
font-size: 1.063rem;
font-weight: 700;
color: #4babb3;
position: relative;
padding-left: 1.188rem;
margin-top: 2.5rem;
margin-bottom: 0.875rem;
line-height: 2.2;
}
.txt-color::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/icon-blue.png) no-repeat;
width: 15px;
height: 7px;
left: 0;
top: 15px;
}
.photo-box{
padding: 0 30px;
}
.photo-box > div{
padding: 0;
}
.sec-4 .part-3 {
padding-top: 4.188rem;
padding-bottom: 5rem;
}
.pd-photo{
padding-top: 3rem;
}
.sec-4 .part-4 {
padding-top: 4.188rem;
padding-bottom: 4.625rem;
background: #f4fefe;
}
.part-sub{
padding-top: 2.25rem;
--bs-gutter-x: 0;
justify-content: space-between;
}
.part-sub-2{
padding-top: 2.375rem;
--bs-gutter-x: 0;
justify-content: space-between;
}
.part-sub > div{
padding: 0;
}
.part-sub .col-lg-4,
.part-sub-2 .col-lg-4{
padding: 0 10px;
}
.sec-4 .part-5 {
padding-top: 4.188rem;
padding-bottom: 5.625rem;
}
.tlt-7{
margin-bottom: 0;
font-size: 1.25rem;
position: relative;
padding-bottom: 1.5rem;
margin-top: 2.5rem;
border-bottom: 1px solid #ffedcd;
color: #232323;
align-items: center;
font-weight: bold;
}
.icon-tlt-7{
padding-right: 10px;
}
.part-sub .icon-tlt-7,
.part-sub-2 .icon-tlt-7{
padding-right: 10px;
width: 26%;
}
.part-sub .tlt-7 span:last-child,
.part-sub-2 .tlt-7 span:last-child{
width: 74%;
line-height: 1.7;
}
.content-sub{
padding: 0 14px;
}
.content-sub .text{
font-size: 1.063rem;
margin-bottom: 0;
padding-top: 1.063rem;
line-height: 1.6;
color: #232323;
}
.sec-4 .part-sub-3{
padding-top: 5rem;
}
.part-spec{
padding-top: 1.875rem;
--bs-gutter-x: 0;
}
.part-spec > div{
padding: 0;
}
.part-spec > div.right-text{
padding: 8px 1.875rem 0 14px;
}
.part-spec .tlt-7{
margin-top: 0;
padding-bottom: 7px;
}
.part-spec .text{
margin-bottom: 0;
margin-top: 1rem;
line-height: 1.6;
color: #232323;
}
.sec-4 .part-6 {
padding-top: 2.313rem;
padding-bottom: 4.625rem;
background: #f4fefe;
}
.sec-4 .part-6 .tlt-5{
letter-spacing: -1px;
}
.txt-black{
font-weight: 700;
font-size: 1.75rem;
color: #232323;
margin-bottom: 0;
padding-top: 1.5rem;
}
.sec-4 .part-6 .txt-color{
margin-top: 1.875rem;
}
.sec-4 .part-6 .content-text{
padding-top: 1.375rem;
}
.sec-4 .part-7{
padding-top: 3.125rem;
padding-bottom: 5rem;
}
.part-spec-2{
padding-top: 3.75rem;
}
.part-spec-3{
padding-top: 3.125rem;
}
.sec-5{
background: rgb(192,242,235);
background: linear-gradient(90deg, rgba(192,242,235,1) 0%, rgba(162,214,255,1) 100%);
padding: 4.625rem 0 5.875rem;
}
.sec-5 > .bg-w{
border-radius: 20px;
padding-top: 3.25rem;
padding-bottom: 1.25rem;
}
.txt-nor-2{
font-size: 1.063rem;
color: #232323;
margin-bottom: 0;
line-height: 2.2;
padding-top: 1.25rem;
}
.sec-5 .box-ra{
background: rgb(132,208,198);
background: linear-gradient(90deg, rgba(132,208,198,1) 0%, rgba(76,156,235,1) 100%);
margin-top: 2.5rem;
}
.sec-5 .box-ra .bg-w{
padding: 4.188rem 1.875rem 3.75rem 1.875rem;
}
.tlt-8{
font-size: 2.125rem;
font-weight: 700;
border-bottom: 2px solid #60afdd;
padding-bottom: 1.625rem;
justify-content: space-between;
align-items: flex-end;
color: #4baab3;
margin-bottom: 0;
}
.tlt-small{
font-size: 1.375rem;
font-weight: 600;
color: #232323;
}
.txt-msg{
font-size: 1.063rem;
line-height: 2.2;
color: #232323;
margin-bottom: 2.5rem;
}
.sec-5 .part{
padding-top: 2.188rem;
--bs-gutter-x: 0;
}
.sec-5 .part > div{
padding: 0;
}
.photo-right{
text-align: right;
}
.sec-6{
padding: 5.875rem 0 5.625rem;
}
.txt-link-underline{
position: relative;
}
.txt-link-underline::before{
position: absolute;
content: '';
background: #232323;
width: 100%;
height: 1px;
left: 0;
bottom: 1px;
}
.txt-link-underline:hover{
opacity: 0.7;
cursor: pointer;
color: #232323;
}
.sec-6 .txt-nor-2{
padding-top: 2rem;
}
.sec-6 .part{
padding-top: 3.125rem;
}
.item-faq{
border-radius: 20px;
border: 2px solid #4babb3;
margin-bottom: 1.375rem;
background: #4baab3;
}
.item-faq:last-child{
margin-bottom: 5.875rem;
}
.item-qus{
color: #fff;
font-size: 1.5rem;
line-height: 1.6;
background: #4babb3;
border-radius: 16px;
margin-bottom: 0;
padding: 12px 3.125rem;
font-weight: 600;
position: relative;
cursor: pointer;
}
.item-qus.border-no-act{
border-radius: 16px 16px 0 0;
}
.item-qus::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/icon-qus-close.png) no-repeat;
width: 11px;
height: 18px;
right: 30px;
top: 22px;
}
.item-qus.icon-open::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/icon-qus.png) no-repeat;
width: 18px;
height: 11px;
right: 30px;
top: 26px;
}
.item-qus span{
position: relative;
padding-left: 2.5rem;
}
.item-qus span::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/q.png) no-repeat;
width: 22px;
height: 29px;
left: 0;
top: 5px;
}
.item-ans{
padding: 1rem 3.125rem 2.188rem 3.125rem;
line-height: 2.3;
color: #232323;
background: #f4fefe;
border-radius: 0 0 18px 18px;
display: none;
}
.faq-wf {
display: flex;
flex-wrap: nowrap;
}
.faq-wf > div {
width: 47%;
margin: 2%;
text-align: center;
}
.faq-wf p {
text-align: center;
}
.sec-7{
padding: 3.625rem 0 5rem;
background: #f4fafe;
}
.sec-7 .part{
padding-top: 2.125rem;
}
.item-step{
border: 2px solid #4fadd3;
border-radius: 20px;
background: #fff;
padding: 1.25rem 3.125rem 1.5rem;
position: relative;
margin-bottom: 4.063rem;
}
.item-step:last-child{
margin-bottom: 0;
}
.item-step::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/icon-step.png) no-repeat;
width: 28px;
height: 28px;
bottom: -48px;
left: 0;
right: 0;
margin: auto;
}
.item-step:last-child::before{
display: none;
}
.tlt-9{
color: #4fadd3;
align-items: center;
border-bottom: 2px solid #4fadd3;
padding-bottom: 17px;
margin-bottom: 0;
}
.step-num{
font-size: 2.5rem;
letter-spacing: 0.75px;
margin-right: 23px;
transform: skewX(-9deg);
display: block;
font-family: 'Oswald', sans-serif;
}
.step-tlt{
font-size: 1.625rem;
font-weight: 800;
}
.step-txt{
line-height: 2.3;
color: #232323;
margin-bottom: 0;
padding-top: 10px;
}
.sec-8{
padding-top: 5rem;
}
.map{
padding-top: 2rem;
}
.map iframe{
width: 100%;
height: 475px;
}
.s-table {
overflow: auto;
white-space: nowrap;
}
.t-info {
width: 700px;
margin: 1em auto;
border: #eee 1px solid;
}
.t-info td,
.t-info th {
padding: 1em;
background: #fdfdfd;
border: #eee 1px solid;
}
.t-info tr:nth-of-type(2n) td,
.t-info tr:nth-of-type(2n) th {
background: #f2f2f2;
}
.fixed-hd {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
}
.anchor_fixtop {
width: 100%;
display: block;
position: relative;
top: -90px;
visibility: hidden;
}
.products-show__wrap {
padding: 0 10px;
margin-top: 3rem;
}
.products-show {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
.products-show__item {
width: 32%;
margin-right: 2%;
margin-bottom: 3rem;
background: #f2f0f0;
padding: 10px 10px 12px 10px;
border-radius: 10px;
}
.products-show__item:nth-child(3n) {
margin-right: 0;
}
.br-sp{
display: none;
}
@media screen and (max-width: 1360px) {
.photo-ans{
position: static;
text-align: center;
padding-top: 30px;
}
}
@media screen and (max-width: 1200px) {
.cont-1200{
padding: 0 15px;
}
.num-list{
padding-left: 2.875rem;
}
.num-list::before{
left: 0;
}
.part-sub, .photo-box{
--bs-gutter-x: 0;
}
.sec-5{
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 1020px) {
.cont-1020{
padding: 0 15px;
}
.box-ra.cont-1020{
padding: 5px;
}
.sec-2{
padding-left: 15px;
padding-right: 15px;
}
.products-show__wrap {
padding: 0;
}
}
@media screen and (max-width: 992px) {
.cont-check .row{
--bs-gutter-x: 0;
}
.cont-check {
padding-left: 15px;
padding-right: 15px;
}
.check-right{
padding-top: 30px;
}
.sec-1 .txt-nor{
padding-left: 15px;
padding-right: 15px;
}
.tlt-4{
padding-left: 0;
font-size: 1.3rem;
}
.tlt-num{
font-size: 4rem;
}
.tlt-5{
font-size: 1.3rem;
}
.sec-6 .cont-900,
.sec-7 .cont-900{
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 991px) {
.tlt-7{
margin-top: 2rem;
}
.photo-box {
padding: 0;
}
.part-sub > div {
padding-top: 2.125rem !important;
}
.part-sub {
padding-top: 0;
}
.part-spec > div.right-text{
padding-left: 0;
padding-right: 0;
padding-top: 1.875rem;
}
.part-spec-3 .col-lg-4{
text-align: center;
}
.part-sub-2 .text-center{
padding-top: 1.875rem;
}
.part-spec > div:first-child{
text-align: center;
}
.sec-5 .part > div{
text-align: center;
}
.sec-5 .part > div:last-child{
margin-top: 1.875rem;
}
.sec-2{
padding-bottom: 6rem;
}
.content-sub .text{
padding-bottom: 1.875rem;
}
.part-sub-2{
padding-top: 0;
}
.part-sub .icon-tlt-7, 
.part-sub-2 .icon-tlt-7{
width: 9.1%;
}
}
@media screen and (max-width: 767px) {
.txt-black{
font-size: 1.3rem;
}
.tlt-1, .tlt-2{
font-size: 1.5rem;
}
.sec-1{
padding: 3.125rem 0;
}
.sec-1 .tlt-1{
padding-left: 15px;
padding-right: 15px;
}
.sec-2{
padding-top: 3.125rem;
padding-bottom: 3.125rem;
}
.check-txt{
font-size: 1rem;
}
.sec-3::after{
top: 10px;
}
.sec-3.box-ra{
padding-top: 8.125rem;
padding-bottom: 3.125rem;
}
.tlt-3{
font-size: 1.5rem;
}
.num-list{
font-size: 1rem;
}
.box-ans{
padding: 1.875rem 0;
}
.sec-3 .part{
padding-top: 1.875rem;
}
.photo-ans{
padding-left: 15px;
padding-right: 15px;
}
.tlt-4{
padding-bottom: 1.875rem;
}
.sec-4 .part-1,  
.sec-4 .part-3, 
.sec-4 .part-4,
.sec-4 .part-5,
.sec-4 .part-6,
.sec-4 .part-7,
.sec-5,
.sec-6,
.sec-7
{
padding-top: 3.125rem;
padding-bottom: 3.125rem;
}
.sec-4 .part-2{
padding-top: 3.125rem;
padding-bottom: 1rem;
}
.txt-sub-box{
padding-left: 15px;
padding-right: 15px;
}
.tlt-6, .tlt-8{
font-size: 1.5rem;
}
.tlt-small{
font-size: 1.25rem;
padding-top: 15px;
}
.photo-box > div:last-child{
margin-top: 1.875rem;
}
.sec-4 .part-sub-3{
padding-top: 3.125rem;
}
.sec-5 .box-ra .bg-w{
padding: 1.875rem 15px;
}
.sec-5 > .bg-w{
padding-top: 3.125rem;
padding-bottom: 3.125rem;
}
.sec-6 .txt-nor-2 {
padding-top: 1.25rem;
}
.item-qus{
padding-left: 15px;
padding-right: 15px;
font-size: 1rem;
}
.item-qus span::before{
top: -5px;
}
.item-qus::before{
top: 14px;
right: 15px;
}
.item-ans{
padding: 10px 15px;
}
.item-qus.icon-open::before{
top: 18px;
right: 15px;
}
.sec-7 .part {
padding-top: 1.875rem;
}
.item-step{
padding-left: 15px;
padding-right: 15px;
}
.step-num{
font-size: 2rem;
}
.sec-8{
padding-top: 3.125rem;
}
.map {
padding-top: 1.875rem;
}
.content-sub{
padding: 0;
}
.br-sp{
display: block;
}
.txt-nor-2, 
.txt-msg, 
.item-ans,
.step-txt,
.sec-1 .txt-nor,
.sec-2 .txt-nor,
.content-text,
.txt-color{
line-height: 1.8;
}
.txt-color::before{
top: 10px;
}
.check-txt::before{
top: 0;
}
.num-list {
padding-left: 2.375rem;
}
.num-list::before{
width: 25px;
height: 25px;
top: 2px;
}
.tlt-4.flex {
display: flex;
flex-wrap: nowrap;
}
.sec-4 .tlt-text br {
display: none;
}
.sec-3::before{
top: -20px;
}
.products-show__item {
width: 100%;
margin-right: auto;
margin-left: auto;
max-width: 550px;
}
.products-show__item:nth-child(3n) {
margin-right: auto;
}
.products-show__item:last-child {
margin-bottom: 0;
}
}
@media screen and (max-width: 640px) {
.t-info {
width: 100%;
}
.tlt-7{
margin-top: 1rem;
padding-bottom: 1rem;
}
.part-spec > div.right-text{
padding-top: 1rem;
}
.part-spec .tlt-7{
padding-bottom: 1rem;
}
.part-sub .col-lg-4, 
.part-sub-2 .col-lg-4{
padding-left: 0;
padding-right: 0;
}
.item-qus span{
padding-right: 1rem;
display: block;
}
.slide .owl-carousel .owl-nav button {
display: none;
}
}
@media screen and (max-width: 500px) {
.part-sub .icon-tlt-7, .part-sub-2 .icon-tlt-7 {
width: 15.3%;
}
}
@media screen and (max-width: 347px) {
.part-sub .icon-tlt-7, .part-sub-2 .icon-tlt-7 {
width: 26%;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.sub-box{
background: #4baab3;
}
.check-txt{
letter-spacing: -1px;
}
} .top-banner{
position: relative;
}
.top-banner img{
width: 100%;
}
.txt-banner{
width: 100%;
position: absolute;
font-size: 2.75rem;
line-height: 1.4;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #232323;
font-weight: 900;
}
.txt-banner .txt-line {
padding: 0 10px;
}
.txt-banner .txt-line::before{
bottom: 5px;
left: 0;
}
@media screen and (max-width: 767px) {
.top-banner img{
height: 140px;
object-fit: cover;
}
}
@media screen and (max-width: 600px) {
.txt-banner{
font-size: 1.875rem;
}
}
.bread-crumb{
padding: 1.25rem 0 0;
color: #565656;
font-size: 0.875rem;
line-height: 1.5;
}
.bread-crumb .hv-o{
color: #565656;
}
.home-breadcrumb{
position: relative;
padding-left: 3px;
}
.home-breadcrumb::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/home-breadcrumb.png) no-repeat;
width: 16px;
height: 17px;
left: 0;
top: 2px;
}
.page-act{
display: inline-block;
}
.file-breadcrumb{
position: relative;
padding-left: 3px;
}
.file-breadcrumb::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/file-breadcrumb.png) no-repeat;
width: 18px;
height: 15px;
left: 0;
top: 1px;
}
.text-right{
text-align: right;
}
.onetoone-sec-1 .text-right{
padding-top: 3.75rem;
padding-bottom: 0.875rem;
justify-content: flex-end;
}
.onetoone-sec-1 .text-right p:first-child{
margin-right: 0.625rem;
}
.onetoone-sec-1 .text-right a{
display: flex;
justify-content: center;
align-items: center;
background: #F3BB13;
color: #fff;
font-size: 0.875rem;
border-radius: 5px;
padding: 0 1.875rem;
}
.tlt-10{
font-size: 2.125rem;
line-height: 1.6;
border-bottom: 3px solid #4babb3;
padding-bottom: 2.125rem;
font-weight: 700;
margin-bottom: 0;
}
.photo-device{
max-width: 736px;
width: 100%;
margin: auto;
justify-content: space-between;
padding-top: 2.875rem;
}
.photo-desktop{
text-align: center;
padding-top: 1.25rem;
width: 68.8%;
max-width: 505px;
height: 398px;
background: url(//websae.co.jp/bento/img/onetoone/exam-14.png) no-repeat;
}
.photo-smartphone{
text-align: center;
padding-top: 3.125rem;
padding-left: 2px;
width: 25%;
max-width: 184px;
height: 349px;
background: url(//websae.co.jp/bento/img/onetoone/exam-16.png) no-repeat;
}
.photo-smartphone img,
.photo-desktop img{
z-index: -1;
position: relative;
}
.onetoone-sec-1 .part{
padding-top: 2.5rem;
}
.tlt-11{
color: #fff;
font-size: 1.875rem;
line-height: 1.6;
font-weight: bold;
background: #4babb3;
text-align: center;
padding: 11px 0;
margin: 0;
}
.url{
background: #e0f4f6;
color: #232323;
justify-content: center;
align-items: flex-end;
padding: 3px 0 10px;
font-weight: 500;
}
.box-or{
background: #F19E22;
color: #fff;
border-radius: 5px;
font-size: 12px;
padding: 2px 9px;
}
.url span:last-child{
margin-left: 0.938rem;
word-break: break-all;
}
.url a:hover{
color: #232323;
opacity: 0.7;
}
.text-onetoone-1{
font-size: 1.063rem;
line-height: 2;
color: #232323;
padding-top: 1.438rem;
margin: 0;
font-weight: 500;
}
.onetoone-sec-1{
padding-bottom: 4.063rem;
}
.onetoone-sec-2{
background: #f4fefe;
padding: 4.688rem 0;
}
.bg-w-border{
background: #fff;
border: 2px solid #4babb3;
border-radius: 20px;
padding: 3.875rem 2.5rem 2.5rem;
}
.tlt-12{
margin: 0;
align-items: center;
}
.tlt-12 .tlt-left{
font-size: 1.25rem;
color: #fff;
background: #f19f23;
text-align: center;
border-radius: 5px;
padding: 3px 1.438rem;
margin-left: 5rem;
}
.tlt-12 .tlt-left{
position: relative;
}
.tlt-12 .icon-1::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/onetoone/icon1.png) no-repeat;
width: 65px;
height: 65px;
left: -5.313rem;
top: -1.25rem;
}
.tlt-12 .icon-2::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/onetoone/icon2.png) no-repeat;
width: 65px;
height: 65px;
left: -5.313rem;
top: -1.25rem;
}
.tlt-12 .tlt-right{
font-size: 1.875rem;
font-weight: bold;
margin-left: 1.25rem;
}
.bbt{
border-bottom: 3px solid #4babb3;
padding-bottom: 2.5rem;
}
.onetoone-sec-2 .part{
padding-top: 2.813rem;
}
.txt-blue{
color: #4babb3;
font-size: 1.063rem;
font-weight: bold;
line-height: 2;
margin: 0;
}
.txt-blue span{
position: relative;
padding-left: 2.813rem;
display: block;
}
.txt-blue span::before{
position: absolute;
content: '';
background: #4baab3;
width: 32px;
height: 2px;
left: 0;
top: 16px;
}
.bg-text-right{
float: right;
padding-left: 3.125rem;
width: 370px;
}
.txt-black-2{
font-size: 1.063rem;
line-height: 2;
letter-spacing: 0;
color: #232323;
font-weight: 500;
padding-top: 1.25rem;
}
.txt-line-3{
font-weight: 500;
background: linear-gradient(transparent 60%, #F6FF05 0%);
}
.mgt{
margin-top: 4.063rem;
}
.onetoone-sec-3{
padding: 5rem 0 5.313rem;
}
.content-center{
justify-content: center;
}
.onetoone-sec-3 .part{
padding-top: 53px;
}
.sub-part{
margin-bottom: 2.75rem;
}
.sub-part:last-child{
margin-bottom: 0;
}
.sub-part .row{
padding-top: 1.25rem;
--bs-gutter-x: 0;
}
.sub-part .row div{
padding: 0;
}
.sub-part .row .pdl{
padding-left: 1.25rem;
}
.tlt-6-small{
font-size: 1.375rem;
text-align: center;
border-radius: 20px 20px 0 0;
}
.btn-back{
width: 100%;
max-width: 412px;
margin-left: auto;
margin-right: auto;
margin-top: 4.063rem;
text-align: center;
border: 2px solid #4babb3;
background: #fff;
border-radius: 33px;
}
.btn-back a{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #4babb3;
font-size: 1.25rem;
font-weight: bold;
padding: 0.875rem 0;
}
.btn-back a span{
position: relative;
padding-left: 30px;
}
.btn-back a span::before{
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/onetoone/icon-back.png) no-repeat;
width: 9px;
height: 14px;
left: 0;
top: 0.75rem;
}
.onetoone-sec-4{
background: linear-gradient(90deg, rgba(192,242,235,1) 0%, rgba(162,214,255,1) 100%);
padding: 4.375rem 0;
}
.onetoone-sec-4 .box-ra{
border-radius: 20px;
}
.onetoone-sec-4 .bg-w {
border-radius: 16px;
padding: 4.5rem 0 4.688rem;
}
.tlt-13{
font-size: 2.5rem;
font-weight: 700;
text-align: center;
}
.tlt-13 .txt-line-2 {
background: linear-gradient(transparent 73%, #fcff07 0%);
}
.cont-check-2{
max-width: 600px;
width: 100%;
margin: auto;
background: #feffed;
padding: 1.875rem 3.563rem;
border-radius: 20px;
}
.bg-w .txt-black-2{
margin-bottom: 1.688rem;
}
.cont-check-2 .row{
--bs-gutter-x: 0;
}
.cont-check-2 .check-right{
padding-left: 0.938rem;
}
.cont-check-2 .check-txt{
font-weight: 400;
}
.btn-contact{
width: 100%;
max-width: 600px;
margin: 40px auto 0;
border-radius: 42px;
color: #fff;
}
.btn-contact a{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
padding: 1.625rem 0 1.625rem 3.563rem;
}
.btn-contact .hv-o{
color: #fff;
}
.btn-contact span{
position: relative;
line-height: 1;
}
.btn-contact .txt-big{
font-size: 2.063rem;
font-weight: bold;
}
.btn-contact .txt-small{
font-size: 1.688rem;
}
.btn-contact .txt-big::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/onetoone/cicrle.png) no-repeat;
width: 74px;
height: 74px;
left: -95px;
top: -20px;
}
.btn-contact .txt-small::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/onetoone/icon-btn.png) no-repeat;
width: 13px;
height: 20px;
right: -27px;
top: 2px;
}
@media screen and (max-width: 1020px) {
.onetoone-sec-4{
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (max-width: 900px) {
.onetoone-page .cont-900{
padding: 0 15px;
}
.onetoone-sec-1 .cont-900{
padding: 0;
}
.tlt-10, .tlt-13{
font-size: 1.5rem;
}
.tlt-11{
font-size: 1.25rem;
}
.tlt-12 .tlt-right, .tlt-12 .tlt-left{
font-size: 1.125rem;
}
}
@media screen and (max-width: 768px) {
.bg-text-right {
padding-left: 2.125rem;
}
}
@media screen and (max-width: 767px) {
.onetoone-sec-1 {
padding-bottom: 3.125rem;
}
.onetoone-sec-2{
padding: 3.125rem 0;
}
.photo-desktop{
width: 100%;
max-width: 100%;
background-position: 50%;
background-size: contain;
}
.photo-smartphone{
width: 100%;
max-width: 100%;
padding-top: 3.55rem;
background-position: 50%;
margin-top: 30px;
background-size: contain;
}
.tlt-10 {
font-size: 1.125rem;
}
.bg-text-left{
width: 100%;
display: inline-block;
padding-top: 1.875rem;
}
.bg-text-right{
width: 100%;
padding-left: 0;
text-align: center;
}
.mgt {
margin-top: 3.063rem;
}
.tlt-12 .tlt-right{
width: 100%;
margin-left: 68px;
margin-top: 10px;
}
.tlt-12 .icon-1::before,
.tlt-12 .icon-2::before{
top: -7px;
left: -5rem;
}
.content-center {
justify-content: flex-start;
}
.onetoone-sec-4 .bg-w{
padding: 2.5rem 5px;
}
.tlt-13, .bg-w .txt-black-2{
padding-left: 10px;
padding-right: 10px;
}
.tlt-13{
font-size: 1.25rem;
}
.onetoone-sec-3{
padding: 3.125rem 0;
}
.btn-back{
margin-top: 2.5rem;
}
}
@media screen and (max-width: 600px) {
.btn-contact .txt-big::before{
background: url(//websae.co.jp/bento/img/common/cirlce-y-3.png);
width: 52px;
height: 52px;
left: -58px;
top: -15px;
}
.btn-contact .txt-big{
font-size: 1.438rem;
}
.btn-contact .txt-small{
font-size: 1.188rem;
}
.btn-contact .txt-small::before {
position: absolute;
content: '';
background: url(//websae.co.jp/bento/img/common/icon-btn.png) no-repeat;
width: 9px;
height: 14px;
right: -27px;
top: 0;
}
.bread-crumb{
font-size: 0.75rem;
}
.file-breadcrumb::before{
top: -2px;
}
.home-breadcrumb::before{
top: 0;
}
.sub-part {
margin-bottom: 2rem;
}
}
@media screen and (max-width: 575px) {
.sub-part .row div:first-child{
text-align: center;
}
.sub-part .order-1{
order: 2 !important;
}
.sub-part .order-2{
order: 1 !important;
}
.cont-check-2{
padding-left: 15px;
padding-right: 15px;
max-width: 330px;
}
.cont-check-2 .check-right{
padding-left: 0;
}
.sub-part .row .pdl{
padding-left: 0;
}
.btn-back{
margin-top: 0.938rem;
}
}
@media screen and (max-width: 547px) {
.photo-device{
padding-top: 1.875rem;
}
.photo-desktop img{
width: 93.763vw;
height: 55.131vw;
}
.photo-desktop{
height: 80.080vw;
padding-top: 6.656vw;
}
.bg-w-border{
padding: 2.5rem 15px;
}
.btn-contact a{
padding-left: 25px;
}
.url span:last-child{
width: 100%;
margin-left: 0;
text-align: center;
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 427px) {
.btn-contact .txt-big {
font-size: 1rem;
}
.btn-contact .txt-small {
font-size: 0.875rem;
}
.btn-contact .txt-big::before{
top: -19px;
}
}
@media screen and (max-width: 360px) {
.cont-check-2{
max-width: 310px;
}
} @media screen and (max-width: 600px) {
} .cta {
background-image: url(//websae.co.jp/bento/img/cta-bg.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
padding: 74px 0;
}
.cta h2 {
color: #f674ab;
}
.cta div {
margin-top: 30px;
} .owl-item,
.products-show__item,
.products-show__item:visited {
border: 5px solid #f2f0f0;
}
.owl-item:hover,
.products-show__item:hover {
border: 5px solid #f3bb13;
}
 .drawer-hamburger{
z-index: 90;
}
.body-packege .header {
z-index: 89;
}
.grid-1200 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative
}
.page-template-page-example .article-cta{
margin-top: 87px;
}
.bg-white {
background-color: #fff
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch
}
.group-page-example>div {
padding: 26px 22px;
padding-bottom: 90px
}
.group-title-exam-02 {
width: 100%;
max-width: 1000px;
margin: 0 auto;
position: relative
}
.group-title-exam-02 h2 {
width: 100%;
height: 53px;
margin-top: 33px;
border-radius: 26.5px;
background-color: #60b443
}
.group-title-exam-02 span {
position: absolute;
top: -37px;
left: 0;
z-index: 0;
width: 100%;
text-align: center
}
.group-title-exam-02 p {
text-align: center;
display: block;
width: 100%;
color: #333;
font-size: 17px;
letter-spacing: 0;
line-height: 200%;
margin-top: 33px
}
.group-list-exam {
width: 100%;
max-width: 1000px;
margin: 0 auto;
margin-top: 44px;
position: relative
}
.group-list-exam .article-nav{
align-items: stretch;
}
.group-list-exam .article-nav-link {
width: calc((100% - 100px) / 3);
margin-bottom: 43px;
border: 4px solid #f2f0f0;
border-radius: 10px;
background: #f2f0f0;
transition:all 0.35s;
}
.group-list-exam .article-nav-link:hover{
background-color: #fff;
border: 4px solid #f19f22;
opacity: 0.7;
}
.group-list-exam .article-nav-link:hover a{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
}
.group-list-exam .article-nav-link a {
padding: 10px 10px 12px 10px;
box-sizing: border-box;
border:0px;
background: transparent;
}
.group-list-exam .article-nav-img {
position: relative
}
.wrap-img-pc{
width: 100%;
height: 154px;
overflow: hidden;
}
.group-list-exam .article-nav-img>img {
width: 100%;
}
.group-list-exam .article-nav-icon {
position: absolute;
width: 100%;
left: 0;
bottom: -26px;
margin-left: 0;
z-index: 2;
}
.article-nav-category {
position: relative;
text-align: center;
float: left;
display: inline-block;
margin-left: 10px;
margin-top: 22px;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
font-weight: 700;
color: #333
}
.article-nav-category span {
background-color: #fff;
padding: 6px 14px 4px 14px;
display: inline-block;
min-width: 90px;
margin: 1em 5px 5px 0;
background-color: #f3bb13;
color: #fff;
border-radius: 4px;
}
.article-nav-category span:not(:first-child) {
margin-left: 10px;
}
.group-list-exam .article-nav-link:hover .article-nav-category span {
background-color: #fe4;
color: #ef5e16
}
.group-list-exam .article-nav-ttl {
clear: both;
margin-top: 0;
text-align: left;
padding: 9px 10px;
color: #333;
display: block;
font-weight: bold;
font-family: tbudrgothic-std, Meiryo, "Helvetica Neue, Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-style: normal;
}
.group-list-exam .article-nav-desc {
font-size: 14px;
color: #333;
letter-spacing: 0;
font-weight: 400;
text-align: right;
display: block;
padding: 0 10px 10px
}
.group-list-exam .btn-back {
width: 100%;
max-width: 298px;
margin: 0 auto;
margin-top: -3px;
margin-bottom: 30px
}
.group-list-exam .cta-desc {
font-size: 18px;
letter-spacing: 0;
font-weight: 400;
color: #333;
line-height: 180%
}
.cta-desc p {
line-height: 200%;
}
@media all and (-ms-high-contrast:none) {
.article-nav-category {
padding-top: 8px;
padding-bottom: 2px;
}
.article-nav-category span {
padding-top: 8.5px;
padding-bottom: 1.5px;
}
:first-child.item-exam-01 a{
padding-top: 2px;
}
}
@media (max-width:1260px) {
.body-packege .header {
left: 0;
top: 0;
}
.body-packege.customize-support .header {
top: 32px;
}
.col1 .group-page-example .breadcrumbs {
width: 100%;
}
.body-packege .header .container {
width: 100%;
max-width: 1100px;
}
.group-page-example {
padding-left: 15px;
padding-right: 15px;
}
.group-page-example>div {
max-width: 100%;
}
.group-page-example .article-nav {
max-width: 100%;
}
.group-list-exam .article-nav-link {
width: calc((100% - 7.937vw) / 3);
}
}
@media (max-width:1100px) {
.group-page-example {
padding-bottom: 20px;
}
.page-template-page-example, .single-examples {
margin-top: 240px;
}
}
@media (max-width:940px) {
.group-page-example .article-nav {
max-width: 650px;
}
.group-list-exam .article-nav-link {
width: calc((100% - 50px) / 2);
}
}
@media (max-width:782px) {
.body-packege.customize-support .header {
top: 46px;
}
.group-list-exam .article-nav-link {
width: calc((100% - 6.394vw) / 2);
margin-bottom: 6.138vw;
}
}
@media (max-width:750px) {
.group-title-exam-02 h2 {
background-color: #ffffff;
}
.group-title-exam-02 span {
position: relative;
top: 0;
display: block;
padding-left: 20px;
padding-right: 20px;
}
.group-title-exam-02 span img {
z-index: 2;
position: relative;
}
.group-title-exam-02 span::before {
width: 100%;
height: 7.733vw;
content: "";
background-color: #60b443;
position: absolute;
left: 0;
bottom: 0.933vw;
z-index: 1;
border-radius: 26.5px;
}
.group-list-exam {
margin-top: 5.867vw;
}
.group-title-exam-02 p {
margin-top: 4.400vw;
}
.group-list-exam .article-nav-ttl {
font-size: 16px;
padding-bottom: 5px;
}
.group-list-exam .article-nav-desc, .group-list-exam .cta-desc {
font-size: 14px;
line-height: 160%;
}
.body-packege .article-cta .cta-btn {
margin-top: 5.867vw;
}
.group-list-exam .article-nav-desc {
padding-bottom: 0;
}
}
@media (max-width:736px) {
.body-packege .header {
padding-bottom: 10px;
}
.page-template-page-example, .single-examples {
margin-top: 220px;
}
.body-packege .group-page-example .breadcrumbs-in li:last-child {
display: inline-block;
}
}
@media (max-width:660px) {
html #wpadminbar {
position: fixed !important;
}
.page-template-page-example, .single-examples {
margin-top: 40.303vw;
}
.group-page-example>div {
padding-bottom: 26px;
}
}
@media (max-width:600px) {
.group-list-exam .article-nav-link {
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.group-title-exam-02 h2 {
height: auto;
margin-top: 20px;
}
.group-title-exam-02 p {
font-size: 14px;
}
.group-title-exam-02 p br {
display: none;
}
.article-nav-category {
margin-left: 0;
}
.group-list-exam .article-nav-ttl, .group-list-exam .article-nav-desc {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width:480px) {
.page-template-page-example, .single-examples {
margin-top: 20px !important;
}
.body-packege.customize-support .header-cta {
top: 46px;
}
.group-page-example>div {
padding-left: 10px;
padding-right: 10px;
}
.body-packege .article-cta {
padding: 15px;
}
} .single-exam {
width: 100%;
max-width: 800px;
margin: 0 auto;
margin-top: 66px;
position: relative;
}
.group-flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.group-exam-01 {
width: 100%;
padding: 13px 20px 18px;
background-color: #fbf8d6;
}
.group-exam-01>div.group-flex {
flex-wrap: wrap;
}
.item-exam-01 {
width: 100%;
}
.item-exam-01:first-child {
align-items: center;
justify-content: flex-end;
display:flex;
}
.item-exam-01:first-child a:first-child{order: 1;}
.item-exam-01:first-child a:last-child{order: 0;margin-right: 10px;}
.item-exam-01:first-child a {
min-width: 88px;
display: inline-block;
background-color: #f3bb13;
border-radius: 5px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
.item-exam-01:first-child a:not(:first-child) {
margin-left: 10px;
}
.cate-exam {
line-height: 100%;
font-size: 14px;
font-weight: bold;
color: #ffffff;
margin-bottom: -1px;
}
.item-exam-01 h3 {
width: 100%;
font-size: 26px;
letter-spacing: 0;
color: #f18d22;
line-height: 160%;
padding-left: 74px;
background-image: url(//websae.co.jp/wp-content/uploads/2020/08/exam-02.png);
background-position: left 6px top;
background-repeat: no-repeat;
padding-top: 7px;
padding-bottom: 6px; margin: .5em 0;
font-weight: bold;
font-family: tbudrgothic-std, Meiryo, "Helvetica Neue, Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-style: normal;
}
.item-exam-01:last-child {
text-align: right;
font-size: 18px;
color: #333333;
letter-spacing: 0;
font-weight: bold;
line-height: 120%;
}
.item-exam-01:last-child span {
font-size: 20px;
}
.group-exam-thumbnail-02 {
width: 100%;
position: relative;
margin-top: 4px;
padding-top: 80px;
padding-bottom: 57px;
border-top: 1px dashed #c8c8c8;
}
.group-exam-03 {
width: 100%;
position: relative;
background-color: #f2f0f0;
}
.hide-pc {
display: none;
}
.group-exam-04 {
margin-top: 70px;
}
h3.title-exam-00 {
padding-bottom: 31px;
background-image: url(//websae.co.jp/wp-content/uploads/2020/08/exam-07.png);
background-position: left bottom;
background-repeat: no-repeat;
}
.group-exam-thumbnail-02>div {
max-width: 735px;
margin: 0 auto;
justify-content: space-between;
}
.group-khung-pc {
position: relative;
}
.group-khung-pc img {
z-index: 9;
position: relative;
}
.thumbnail-pc {
position: absolute;
width: calc(100% - 28px);
left: 14px;
top: 20px;
height: calc(100% - 120px);
z-index: 2;
background-color: #ccc;
background-repeat: no-repeat;
background-size: cover;
background-position: top;
}
.group-khung-sp {
position: relative;
}
.group-khung-sp img {
position: relative;
z-index: 1;
}
.thumbnail-sp {
width: calc(100% - 32px);
height: calc(100% - 98px);
position: absolute;
left: 16px;
top: 51px;
z-index: 0;
background-color: #ccc;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
}
.item-exam-02:first-child {
width: calc(100% - 230px);
}
.item-exam-02:last-child {
width: 230px;
padding-left: 45px;
}
.group-exam-03 {
text-align: center;
padding-left: 45px;
padding-right: 45px;
padding-top: 50px;
padding-bottom: 59px;
}
.group-exam-03 h3 {
color: #000000;
font-size: 18px;
letter-spacing: 0;
line-height: 160%;
font-weight: bold;
font-family: tbudrgothic-std, Meiryo, "Helvetica Neue, Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-style: normal;
}
.group-exam-03 p {
font-size: 15px;
color: #333333;
line-height: 166%;
letter-spacing: 0;
font-weight: normal;
text-align: left;
}
.url-example {
margin-top: 17px;
margin-bottom: 35px;
display: flex;
align-items: center;
justify-content: center;
}
.url-example span {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f19f22;
border-radius: 5px;
text-transform: uppercase;
width: 42px;
margin-right: 12px;
}
.url-example a {
font-size: 16px;
color: #000000;
letter-spacing: 0;
line-height: 160%;
font-weight: normal;
}
.group-exam-04 .group-flex {
margin-top: 47px;
}
.item-exam-04:first-child {
width: calc(100% - 352px);
padding-right: 20px;
}
.item-exam-04:last-child {
width: 352px;
}
.group-faq-full {
margin-top: 47px;
}
.group-faq:not(:first-child) {
margin-top: 54px;
}
.group-faq h4 {
color: #336e48;
font-size: 16px;
line-height: 150%;
letter-spacing: 0;
padding-left: 57px;
position: relative;
font-weight: bold;
font-family: tbudrgothic-std, Meiryo, "Helvetica Neue, Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-style: normal;
}
.group-faq h4::before {
content: "";
width: 39px;
height: 2px;
background-color: #336e48;
position: absolute;
left: 0;
top: 10.4px;
}
.group-faq p {
font-size: 15px;
font-weight: normal;
letter-spacing: 0;
color: #333333;
line-height: 200%;
margin-top: 17px;
}
.group-faq p strong {
font-weight: bold;
position: relative;
background-image: url(//websae.co.jp/wp-content/uploads/2020/08/exam-09.png);
background-position: left bottom 2px;
background-repeat: repeat-x;
}
.group-exam-05 {
width: 100%;
margin-top: 87px;
position: relative;
}
.group-exam-05 .group-flex {
margin-top: 25px;
justify-content: space-between;
}
.group-exam-05 .item-exam-05 {
width: calc((100% - 37px) / 2);
}
.item-exam-05 h4 {
width: 100%;
height: 60px;
border-radius: 5px;
background-color: #f2f0f0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
line-height: 156%;
color: #333333;
font-weight: bold;
font-family: tbudrgothic-std, Meiryo, "Helvetica Neue, Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-style: normal;
}
.item-exam-05 p {
line-height: 200%;
color: #333333;
letter-spacing: 0;
font-weight: normal;
font-size: 15px;
}
.thumb-exam-05 {
margin-top: 16px;
border: 3px solid #f2f0f0;
overflow: hidden;
margin-bottom: 17px;
}
.group-exam-06 {
width: 100%;
margin-top: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.group-exam-06>div {
width: 50%;
}
.group-exam-06>div:not(:first-child) {
margin-left: 10px;
}
.group-exam-06>.btn-back {
max-width: 298px;
}
.group-exam-06>.btn-greens {
max-width: 392px;
}
.btn-greens a {
padding-top: 29.5px;
padding-bottom: 29.5px;
font-size: 22px;
background-image: inherit;
background-color: transparent;
}
.btn-greens {
background: linear-gradient(#70bc56 0%, #70bc56 50%, #60b443 50%, #60b443 100%);
}
.btn-greens a:hover {
background: #60b443;
}
.card__image {
height: 520px;
overflow: hidden;
width: 100%;
}
.card__image img {
object-fit: cover;
overflow: hidden;
transition: transform 5s ease-in-out;
width: 100%;
-webkit-transition: transform 5s ease-in-out;
-moz-transition: transform 5s ease-in-out;
-ms-transition: transform 5s ease-in-out;
-o-transition: transform 5s ease-in-out;
}
.card__image:hover img {
transform: translateY(calc(-100% + 520px));
transition: transform 4s ease-in-out;
}
.group-exam-07 {
width: 100%;
position: relative;
margin-top: 110px;
}
@media (max-width:830px) {
.group-exam-thumbnail-02 {
padding-top: 9.639vw;
padding-bottom: 6.867vw;
}
.group-exam-thumbnail-02>div {
max-width: 600px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.item-exam-02:first-child {
width: 100%;
max-width: 505px;
margin: 0 auto;
}
.item-exam-02:last-child {
padding-left: 0;
width: 100%;
max-width: 150px;
position: absolute;
right: 0;
bottom: 0;
z-index: 11;
}
.thumbnail-sp {
width: calc(100% - 23px);
height: calc(100% - 77px);
left: 12px;
top: 40px;
background-color: #ccc;
}
.group-exam-03 {
padding: 5.422vw;
}
.group-exam-04 {
margin-top: 8.434vw;
}
.url-example {
margin-top: 2.048vw;
margin-bottom: 4.217vw;
}
.group-faq:not(:first-child) {
margin-top: 6.506vw;
}
.group-exam-05 {
margin-top: 10.482vw;
}
}
@media (max-width:767px) {
.page-template-page-example .article-cta {
margin-top: 40px;
}
.hide-sp {
display: none;
}
.hide-pc {
display: block;
margin: 0 auto;
}
.group-exam-04 .group-flex {
flex-wrap: wrap;
margin-top: 5.663vw;
}
.item-exam-04:first-child {
order: 1;
padding-right: 0;
width: 100% !important;
}
.item-exam-04:last-child {
width: 100%;
order: 0;
text-align: center;
margin-bottom: 20px;
}
.item-exam-04:last-child img {
display: block;
margin: 0 auto;
}
.group-exam-05 .group-flex {
flex-wrap: wrap;
}
.group-exam-05 .item-exam-05 {
width: 100%;
}
.group-exam-05 .item-exam-05:not(:first-child) {
margin-top: 25px;
}
.group-exam-06 {
flex-wrap: wrap;
max-width: 350px;
margin: 0 auto;
margin-top: 9.387vw;
}
.group-exam-06>div {
width: 100%;
max-width: 100% !important;
}
.group-exam-07 {
margin-top: 14.342vw;
}
.card__image {
height: 350px;
}
.group-exam-06>div:not(:first-child) {
margin-left: 0;
margin-top: 15px;
}
.item-exam-01 h3 {
margin: 0;
font-size: 3.390vw;
background-size: 6.780vw;
background-position: left top;
padding-left: 9.648vw;
padding-top: 0.913vw;
padding-bottom: 0.782vw;
}
.group-exam-01 {
padding: 2.608vw;
}
.single-exam {
margin-top: 8.605vw;
}
}
@media (max-width:736px) {
.btn-greens a {
padding: 20px;
font-size: 14px;
}
.item-exam-05 h4 {
height: auto;
padding-top: 15px;
padding-bottom: 15px;
}
}
@media (max-width:600px) {
.item-exam-02:last-child {
max-width: 25vw;
}
.thumbnail-sp {
width: calc(100% - 3.833vw);
height: calc(100% - 12.833vw);
left: 2vw;
top: 6.667vw;
}
.item-exam-01:first-child {
margin-bottom: 10px;
}
.group-faq-full {
margin-top: 6.667vw;
}
.cate-exam {
font-size: 13px;
}
.item-exam-01 h3 {
font-size: 16px;
background-position: left center;
}
.item-exam-01:first-child a {
min-width: 14.667vw;
}
.item-exam-01:first-child a:not(:first-child) {
margin-left: 5px;
}
.item-exam-01:last-child {
font-size: 14px;
}
.item-exam-01:last-child span {
font-size: 3.333vw;
}
.thumbnail-pc {
width: calc(100% - 4.667vw);
left: 2.333vw;
top: 3.333vw;
height: calc(100% - 20vw);
}
}
@media (max-width:480px) {
.header-cta{z-index: 90;}
.group-exam-03 h3 {
font-size: 16px;
}
.url-example {
flex-direction: column;
}
.url-example a {
margin-top: 10px;
}
.group-exam-03 p, .group-faq p, .item-exam-05 p, .cta-desc p {
font-size: 14px;
line-height: 160%;
}
.group-faq h4 {
padding-left: 30px;
}
.group-faq h4::before {
width: 20px;
}
.group-faq p {
margin-top: 10px;
}
.item-exam-01:last-child {
font-size: 15px;
margin-top: 10px;
}
.item-exam-01:last-child span {
font-size: 12px;
}
h3.title-exam-00 {
padding-bottom: 20px;
}
.group-faq h4 {
font-size: 15px;
}
.group-faq h4::before {
top: 7.4px;
}
.article-nav-category span{
margin: 5px;
}
}
@media (max-width:370px){
.body-packege .article-cta .cta-btn a {
padding: 20px 10px;
background-position: 10px center;
font-size: 14px;
}
}
.commentbywebsae{
border: 1px solid #333;
padding: 10px;
margin: 5px 0;
}