@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,700;1,700&display=swap');
/*---------------------------
リセット
---------------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0; 
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
html{
font-family: 'Noto Sans JP', sans-serif;
}
body {
line-height:1;
color:#151515;
font-size:20px;
font-weight: bold;
}
html, body {
overflow-x: hidden;
}
footer address{
font-style:normal;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
}
li{
list-style:none;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
p{
line-height: 1.6;
}
img{
width: 100%;
max-width: 100%;
vertical-align: bottom;
}
.sp{
display: none;
}
.pc {
display: block;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 20
}
.material-symbols-outlined{
display: inline-flex;
vertical-align: middle;
}

/*---------------------------
PC
---------------------------*/
header{
display: flex;
align-items: center;
max-width: 1200px;
margin: 50px auto 0;
gap: 30px;
}
.logo{
width: 384px;
}
.fv-img{
width: 710px;
}
.fv-bottom{
border-radius: 10px;
max-width: 1200px;
margin: 20px auto 0;
border: 5px solid #339CD0;
position: relative;
padding: 56px 35px 40px;
}
.under-line {
background: linear-gradient(transparent 70%, #FFDC72 0%);
line-height: 1;
}
.fv-bottom h1{
position: absolute;
left: 0;
right: 0;
top: -30px;
margin: auto;
line-height: 60px;
color: #fff;
background: #339CD0;
border-radius: 30px;
width: calc(100% - 100px);
text-align: center;
font-size: 28px;
font-weight: 900;
}
.curve-top {
margin-top: 50px;
width: 100%;
height: 120px;
border-radius: 50%;
background-color: #ECF6FB;
}
.curve-bottom {
position: relative;
z-index: 1;
margin-top: -60px;
width: 100%;
height: 120px;
border-radius: 50%;
background-color: #ECF6FB;
}
.service-list-wrap{
position: relative;
z-index: 2;
background: #ECF6FB;
margin-top: -60px;
padding: 30px 0 60px;
}
.bg-blue {
width: 58%;
height: 722px;
background-color: #E2F1F8;
border-radius: 0 300px 300px 0;
}
.bg-green {
width: 58%;
height: 722px;
background-color: #EAF6F0;
border-radius: 300px 0 0 300px;
}
.bg-dot {
width:800px;
height: 800px;
background-image: radial-gradient(circle, #e5e5e5 2.5px, transparent 2.5px);
background-position: 0 0;
background-size: 10px 10px;
}
.bg-1 {
position: absolute;
top: 12%;
left: 0;
}
.bg-2 {
position: absolute;
top: 35%;
right: 0;
}
.bg-3 {
position: absolute;
bottom: 12%;
left: 0;
}
.bg-dot-1 {
position: absolute;
top: 4%;
right: 7%;
}
.bg-dot-2 {
position: absolute;
top: 40%;
left: 3%;
}
.bg-dot-3 {
position: absolute;
bottom: 5%;
right: 0;
}

.service-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px 30px;
max-width: 1200px;
margin: 0 auto;
}
.service-list li{
display: flex;
flex-direction: column;
position: relative;
padding: 35px;
border-radius: 10px;
background: #fff;
box-shadow: 5px 5px 0 #B1D9ED;
}
.service-list li h3{
color: #339CD0;
margin-bottom: 25px;
font-size: 26px;
font-weight: 900;
}
.service-list h3:after {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;

color: #20A464;
font-size: 12px;
vertical-align: top;
margin-left: 10px;
}
.service-list li:nth-of-type(1) h3:after{
content: '/ GOURMET';
}
.service-list li:nth-of-type(2) h3:after{
content: '/ TRAVEL';
}
.service-list li:nth-of-type(3) h3:after{
content: '/ LEISURE';
}
.service-list li:nth-of-type(4) h3:after{
content: '/ HEALTH';
}
.service-list li:nth-of-type(5) h3:after{
content: '/ BEAUTY';
}
.service-list li:nth-of-type(6) h3:after{
content: '/ REPAIR';
}
.service-list li:nth-of-type(7) h3:after{
content: '/ LIFE PLANNING';
}
.service-list li:nth-of-type(8) h3:after{
content: '/ TROUBLE SUPPORT';
}
.service-list li p {
margin-bottom: 20px;
}
.service-list li img {
margin-top: auto;
border-radius: 10px;
}
.travel-icon {
width: 190px;
position: absolute;
top: -40px;
right: -150px;
}
.gourmet-icon {
width: 180px;
position: absolute;
bottom: 80px;
left: -158px;
}
.health-icon {
width: 168px;
position: absolute;
top: 150px;
right: -270px;
}
.beauty-icon {
width: 85px;
position: absolute;
top: -130px;
left: -120px;
}
.lifeplanning-icon {
width: 104px;
position: absolute;
top: -50px;
left: -200px;
}
.repair-icon {
width: 136px;
position: absolute;
top: -55px;
right: -120px;
}
.icon-anime {
    animation: iconanime 2s ease-in-out infinite;
}
@keyframes iconanime {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
}
.icon-anime2 {
    animation: iconanime2 2s ease-in-out infinite;
}
@keyframes iconanime2 {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-15deg);
    }
}
.sec-qa{
background: #EAF6F0;
margin-top: -60px;
padding: 110px 0 80px;
}
.sec-qa h2{
color: #20A464;
font-size: 30px;
text-align: center;
margin-bottom: 50px;
}
.sec-qa h2:after{
content: '';
display: block;
width: 350px;
height: 304px;
margin: 20px auto 0;
background: url(img/qanda.svg) no-repeat center / contain;
}
.qa-cont {
    max-width: 1000px;
    margin: 0 auto 36px;
    box-shadow: 0 0 0 3px #20A464;
    border-radius: 10px;
    background: #fff;
}
.qa-cont:last-child{
margin-bottom: 0;
}
.qa-cont input{
display: none;
}
.qa-cont label{
display: block;
position: relative;
padding: 30px 80px 30px 90px;
cursor: pointer;
}
.qa-cont label:before{
content: 'Q';
position: absolute;
top: 5px;
bottom: 5px;
left: 46px;
margin: auto;
height: fit-content;
font-family: "Rubik", sans-serif;
font-size: 26px;
color: #20A464;
}
.qa-cont .plus{
display: block;
width: 20px;
height: 20px;
position: absolute;
right: 46px;
top: 0;
bottom: 0;
margin: auto;
}
.qa-cont .plus span{
display: block;
width: 100%;
height: 100%;
}
.qa-cont .plus span:before,.qa-cont .plus span:after{
content: '';
display: block;
width: 100%;
height: 3px;
background: #20A464;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.qa-cont .plus span:after{
transform: rotate(90deg);
transition:transform 0.3s ;
}
.qa-cont:has(input:checked) .plus span:after{
transform: rotate(0deg);
}
.answer-wrap{
max-height: 0;
overflow: hidden;
transition:max-height 0.3s ;
padding: 0 50px 0 90px;
position: relative;
}
.qa-cont:has(input:checked) .answer-wrap{
max-height: 100vh;
}
.answer-wrap:before{
content: 'A';
position: absolute;
top: 3px;
left: 46px;
font-family: "Rubik", sans-serif;
font-size: 26px;
color: #20A464;
}
.answer-wrap-in{
margin-bottom: 30px;
}
.flex{
display: flex;
gap: 30px;
}
.answer-wrap p {
font-size: 16px;
font-weight: 400;
}
.answer-wrap-in .gray{
width: 50%;
background: #F8F8F8;
border-radius: 20px;
padding: 30px;
}
.answer-wrap-in .gray h4{
margin-bottom: 25px;
font-size: 26px;
font-weight: 900;
text-align: center;
}
.answer-wrap-in .gray ul li {
font-size: 14px;
font-weight: 400;
text-indent: -16px;
padding-left: 16px;
}
.answer-wrap-in .gray .mail-link,
.answer-wrap-in .gray .tel-link {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.answer-wrap-in .gray .mail-link:before {
width: 50px;
height: 50px;
content: '';
background-image: url('img/mail.svg');
background-repeat: no-repeat;
background-size: contain;
}
.answer-wrap-in .gray .mail-link a {
font-family: "Rubik", sans-serif;
font-size: 16px;
font-weight: 700;
margin-left: 10px;
}
.answer-wrap-in .gray .mail-recp-hours,
.answer-wrap-in .gray .tel-recp-hours {
margin-bottom: 30px;
font-size: 20px;
font-weight: 900;
text-align: center;
}
.answer-wrap-in .gray .tel-link:before {
width: 50px;
height: 50px;
content: '';
background-image: url('img/phone.svg');
background-repeat: no-repeat;
background-size: contain;
}
.answer-wrap-in .gray .tel-link a {
font-family: "Rubik", sans-serif;
font-size: 30px;
font-weight: 700;
margin-left: 10px;
}
.answer-wrap a {
color: #339CD0;
border-bottom: 1px solid #339CD0;
padding-bottom: 3px;
font-weight: 700;
}

.sec-company {
position: relative;
z-index: 0;
background: #E2F1F8;
padding: 60px 0 0;
}
.sec-company::before {
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
content: '';
display: block;
width: calc(100% - 100px);
height: calc(100% - 60px);
background-color: #ffffff;
border-radius: 300px 0 0 0;
}
.bg-dot-4 {
position: absolute;
top: -30px;
left: 0;
z-index: -2;
width:800px;
height: 400px;
background-image: radial-gradient(circle, #e5e5e5 2.5px, transparent 2.5px);
background-position: 0 0;
background-size: 10px 10px;
}
.company-overview-in{
max-width: 750px;
margin: 0 auto;
padding: 60px 100px 60px;
}
.company-overview-in h2{
margin-right: 20px;
color: #339CD0;
font-size: 30px;
text-align: center;
}
.company-overview-in dl{
display: flex;
font-size: 16px;
margin-top: 50px;
}
.company-overview-in dt{
width: 20%;
color: #339CD0;
}
.company-overview-in dd{
width: 80%;
font-weight: 400;
}
.company-overview-in dl:last-child dt,.company-overview-in dl:last-child dd{
border-bottom: 0;
}
.company-overview-in dd ul{
margin-top: 14px;
padding-left: 0;
line-height: 1.8;
}
.company-overview-in dl dd ul li {
list-style-type: disc;
list-style-position: inside;
font-size: 14px;
text-indent: -20px;
padding-left: 20px;
}
.company-overview-in dl dd ul li:nth-child(odd)::marker {
color: #339CD0;
}
.company-overview-in dl dd ul li:nth-child(even)::marker {
color: #20A464;
}

footer{
background: transparent linear-gradient(90deg, #339CD0 0%, #20A464 100%) 0% 0% no-repeat padding-box;
padding: 20px 0;
text-align: center;
}
footer span{
color: #339CD0;
background: #fff;
border-radius: 30px;
font-size: 12px;
padding: 5px 30px;
margin-bottom: 16px;
display: inline-block;
}
footer span .material-symbols-outlined {
font-size: 15px;
}
footer a{
color: #FFF;
font-size: 12px;
margin-bottom: 16px;
display: inline-block;
}
footer .copy{
font-size: 12px;
color: #fff;
font-weight: 300;
}

.lowerpage header{
max-width: 1200px;
margin: 15px auto;
}
.lowerpage header .logo {
width: 150px;
}

.lowerpage .sec-privacy{
margin:0 auto;
background:#ECF6FB;
padding: 50px;
}
.lowerpage .sec-privacy h1{
max-width:1000px;
margin: auto;
padding:0;
font-size:24px;
}
.lowerpage .sec-privacy .privacy-cont{
background:#FFF;
max-width:1000px;
margin:50px auto;
padding:50px;
font-size: 16px;
font-weight:normal;
border-radius:10px;
}
.lowerpage .sec-privacy .privacy-cont h2{
margin:0 0 30px;
padding:20px;
font-size:20px;
background:#EAF6F0;
border-radius:10px;
}
.lowerpage .sec-privacy .privacy-cont h4 {
font-size: 18px;
padding: 15px 0;
}
.lowerpage .sec-privacy .privacy-cont p {
margin: 0 0 15px;
}
.lowerpage .sec-privacy .privacy-cont ol {
margin-bottom: 15px;
}
.lowerpage .sec-privacy .privacy-cont li {
font-size:16px;
line-height:1.6;
text-indent: -16px;
padding: 15px 0 15px 16px;
}
.lowerpage .sec-privacy .privacy-cont ol li {
list-style-type: decimal;
list-style-position: inside;
}
.lowerpage .sec-privacy .privacy-cont ol li ul li {
list-style-type: disc;
padding: 0 0 0 16px;
}
.lowerpage .sec-privacy .privacy-cont ol li:last-child {
padding-bottom: 0;
}
.lowerpage .sec-privacy .privacy-cont .privacy-aside {
text-align: right;
margin-bottom: 30px;
font-size: 12px;
line-height: 1.6;
}
.lowerpage .sec-privacy .privacy-cont ol li .textSmall {
font-size: 13px;
}
.lowerpage .sec-privacy .privacy-cont .privacy-info {
display: flex;
gap: 30px;
margin-top: 30px;
}
.lowerpage .sec-privacy .privacy-cont .privacy-info h3 {
color: #20A464;
}


/*---------------------------
SP
---------------------------*/
@media screen and (max-width:768px) {
body {
font-size:16px;
}
p {
    line-height: 1.5;
}
.sp{
display: block;
}
.pc {
display: none;
}
header {
margin: 30px 5% 0;
display: block;
}
header .logo {
height: 50px;
margin-bottom: 30px;
}
header .fv-img {
padding-right: 10px;
padding-left: 10px;
}
.fv-bottom {
margin: 0 5% 0;
padding: 0 0 0;
border: none;
}
.fv-bottom h1{
position: static;
padding: 10px 20px 5px; 
line-height: 1.5;
border-radius: 10px 10px 0 0;
width: 100%;
font-size: 18px;
text-align: left;
}
.fv-bottom p{
padding: 10px 15px 15px;
border: 5px solid #339CD0;
border-radius: 0 0 10px 10px;
}
.curve-top {
margin-top: 30px;
}
.service-list-wrap{
padding: 0;
}
.service-list{
grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 5%;
}
.service-list li{
padding: 20px;
}
.service-list li h3,.service-list li p {
margin-bottom: 15px;
}
.service-list li:nth-of-type(7) h3:after{
display: block;
margin-top: 5px;
text-align: right;
}
.service-list li:nth-of-type(8) h3:after{
display: block;
margin-top: 5px;
text-align: right;
}
.travel-icon {
width: 95px;
top: -75px;
right: 55%;
}
.gourmet-icon {
width: 85px;
top: -75px;
left: 55%;
}
.sec-qa{
padding: 80px 0 30px;
}
.sec-qa h2{
font-size: 26px;
margin-bottom: 30px;
}
.sec-qa h2:after{
width: 250px;
height: 218px;
}
.qa-cont {
margin: 0 5% 25px;
}
.qa-cont label {
padding: 15px 50px 15px 50px;
}
.qa-cont label:before{
left: 20px;
font-size: 20px;
}
.qa-cont h3 {
line-height: 1.5;
}
.qa-cont .plus{
right: 20px;
}
.answer-wrap{
padding: 0 50px 0 50px;
}
.answer-wrap:before{
left: 20px;
font-size: 20px;
}
.flex {
flex-direction: column;
}
.answer-wrap-in .gray {
width: 100%;
padding: 15px 15px 20px;
}
.answer-wrap-in .gray h4{
margin-bottom: 15px;
font-size: 18px;
}
.answer-wrap-in .gray .mail-link,
.answer-wrap-in .gray .tel-link {
margin-bottom: 15px;
}
.answer-wrap-in .gray .mail-recp-hours,
.answer-wrap-in .gray .tel-recp-hours {
margin-bottom: 15px;
}
.answer-wrap-in .gray .mail-link:before,
.answer-wrap-in .gray .tel-link:before {
width: 25px;
height: 25px;
}
.answer-wrap-in .gray .mail-link a {
font-size: 10px;
margin-left: 5px;
}
.answer-wrap-in .gray .tel-link a {
font-size: 20px;
margin-left: 5px;
}
.sec-company {
padding: 30px 0 0;
}
.sec-company::before {
height: calc(100% - 30px);
}
.sec-company::before {
width: calc(100% - 20px);
border-radius: 50px 0 0 0;
}
.company-overview-in {
padding: 30px 20px 30px 50px;
}
.company-overview-in dl {
flex-direction: column;
margin-top: 30px;
}
.company-overview-in dt,
.company-overview-in dd {
width: 100%;
}
.company-overview-in dt {
margin-bottom: 15px;
}

.lowerpage header{
margin: 15px 20px;
}
.lowerpage header .logo{
margin-bottom: 0;
}
.lowerpage .sec-privacy {
padding: 30px 20px;
}
.lowerpage .sec-privacy .privacy-cont .privacy-info {
flex-direction: column;
gap: 15px;
}
.lowerpage .sec-privacy .privacy-cont {
margin: 30px auto;
padding: 20px;
}
}

/*その他サイズ調整*/
@media screen and (max-width:375px) {
.service-list li:nth-of-type(2) h3:after{
margin-left: 5px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px){
.fv-bottom,
.service-list,
.qa-cont {
margin-left: 20px;
margin-right: 20px;
}
.fv-bottom h1 {
font-size: 20px;
}
.travel-icon {
right: -230px;
}
.gourmet-icon {
left: -230px;
}
.repair-icon {
right: -160px;
}
.sec-company::before {
border-radius: 100px 0 0 0;
}

.lowerpage header{
margin: 15px 20px;
}
}