@charset "utf-8";

/* =================================================================
CSS情報　　 ：リセット
使用ファイル：すべてのファイル

html5doctor.com Reset Stylesheet
v1.6
Last Updated: 2010-08-18
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
=================================================================*/

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; background:transparent; outline:0; font-size:100%; vertical-align:baseline;}

input{padding:0;}
body{line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none;}
a{margin:0; padding:0; background:transparent; font-size:100%; vertical-align:baseline;}

/*  change colours to suit your needs
-------------------------------------------------------------*/
ins{color:#000; text-decoration:none;}

/*  change colours to suit your needs
-------------------------------------------------------------*/
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 inherit; cursor:help;}
table{border-collapse:collapse; border-spacing:0;}

/*  change border colour to suit your needs
-------------------------------------------------------------*/
hr{display:block; height:1px; margin:1em 0; padding:0; border:0; border-top:1px solid #cccccc;}
input, select{vertical-align:middle;}



/* ===================================================================
CSS情報　　 ：基本情報
使用ファイル：すべてのファイル
=================================================================== */

body{font-family: Poppins, 'Noto Sans JP', sans-serif;font-feature-settings: "palt";color:#111;font-size:16px;word-break:break-all;letter-spacing: .15vw;font-weight: 400;-webkit-text-size-adjust: 100%;}

a{color:#111;text-decoration:none;}

.inner{width:860px;margin:auto;padding:150px 0;}
@media (max-width: 960px) and (min-width: 640px) {
.inner{width:auto;padding:100px 30px;}
}
@media (max-width: 640px) {
.inner{width:auto;padding:80px 20px;overflow: hidden;}
}


.common__pc-hide{display:none;}
@media (max-width: 640px) {
.common__pc-hide{display:inline;}
}
.common_sm-hide{display:inline;}
@media (max-width: 640px) {
.common__sm-hide{display:none;}
}


.common__title{font-size: 46px;text-align: center;font-weight: 700;margin-bottom: 50px;}
@media (max-width: 640px) {
.common__title{font-size: 32px;}
}
.common__title span{display: block;font-size: 16px;margin-top: 15px;}
@media (max-width: 640px) {
.common__title span{font-size: 14px;margin-top: 10px;}
}


/* scroll animation */
.sa {
  opacity: 0;
  transition: all 1s ease;
}
.sa.show {
  opacity: 1;
  transform: none;
} 
.sa__up {
  transform: translate(0, 30px);
}



/* ===================================================================
CSS情報　　 mainvisual
使用ファイル：すべてのファイル
=================================================================== */

.mainvisual{width: 100%;height: calc( 100svh - 70px );overflow: hidden;}
.mainvisual__inner{position: relative;background: rgb(67,163,208);
background: linear-gradient(0deg, rgba(67,163,208,1) 0%, rgba(231,132,212,1) 50%, rgba(228,126,203,1) 60%, rgba(255,255,255,1) 100%);padding: 0 20px 40px;height: calc( 100svh - 40px );}
.mainvisual__animation{height: 200%;mix-blend-mode: screen;opacity: 0.3;}
.mainvisual__animation svg{transform: none !important;}
.mainvisual__content{position: absolute;width: calc( 100vw - 40px );
top: 6svh;text-align: center;mix-blend-mode: overlay;}
.mainvisual__content-title{font-size: 120px;font-weight: 700;line-height: 1.1;}
.mainvisual__content-paragraph{font-size: 20px;font-weight: 700;margin-top: 30px;line-height: 1.5;}

@media (max-width: 960px) and (min-width: 640px) {
.mainvisual__content-title{font-size: 80px;}
}
@media (max-width: 640px) {
.mainvisual{height: 600px;}
.mainvisual__inner{height: 100%;}
.mainvisual__animation{width: 200%;margin-left: -103px;}
.mainvisual__content-title{font-size: 52px;}
.mainvisual__content{font-size: 4vw;margin-top: 30px;}
}



/* ===================================================================
CSS情報　　 header
使用ファイル：すべてのファイル
=================================================================== */

.header{position: sticky;position: -webkit-sticky;top:0;padding:20px;height:30px;z-index:10;
-webkit-transition: background .3s ease-in;
transition: background .3s ease-in;}
.header__logo{display:block;height:30px;float: left;}
.header__menu {
position: relative;
z-index: 5;
left: 0;
top: 8px;
visibility: visible;
overflow: auto;
height: auto;
padding-top: 0;
opacity: 1;
float: right;
-webkit-transition: background .3s ease;
transition: background .3s ease;
}
.header__menu nav {
}
.header__menu nav, .header__menu ul {
}
.header__menu li {display: inline-block;font-size: 16px;margin-left:20px;font-weight: 700;}
.header__menu a {
display: block;
color: #111;
-webkit-transition: color .1s ease-in;
transition: color .1s ease-in;
text-decoration: none;
}
.header__menu a span{
  display: none;
}
.header__menu a:hover {
color: #111;
}
.header__toggle {
display: none;
}
#header__menu-icon {
display: none;
}

@media (max-width: 640px){
.header__menu {
display: none;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
/* overflow-y: scroll; */
overflow: hidden;
height: 100%;
padding-top: 60px;
-webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
opacity: 0;
background: rgb(67,163,208);
background: linear-gradient(0deg, rgba(67,163,208,1) 0%, rgba(231,132,212,1) 70%, rgba(228,126,203,1) 100%);
}
.header__menu nav {
}
.header__menu li {
display: block;
margin-left: 0;
}
.header__menu a {
padding: 1.5em;
color: #111;
font-size: 24px;
mix-blend-mode: overlay;
}
.header__menu a span{
  display: inline;
  font-size: 14px;
  margin-left: 15px;
  color: #111;
}
.header__menu a:hover {
background-color: #FFF;
}
.header__toggle {
display: block;
z-index: 10;
position: absolute;
top: 6px;
right: 0;
padding: 0 20px;
height: 60px;
}
.header__menu-icon {
display: block;
position: relative;
float: right;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.header__menu-icon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.1em;
border-radius: 1px;
background-color: #111;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.header__menu-icon > span:before, .header__menu-icon > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: #111;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.header__menu-icon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.header__menu-icon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#header__menu-icon:checked + .header__toggle .header__menu-icon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#header__menu-icon:checked + .header__toggle span,
#header__menu-icon:checked + .header__toggle span:before,
#header__menu-icon:checked + .header__toggle span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: #111;
}
#header__menu-icon:checked ~ .header__menu {
display: block;
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
}



/* ===================================================================
CSS情報　　 service
使用ファイル：すべてのファイル
=================================================================== */

.service{}
.service__box{display: flex;flex-wrap: wrap;align-items: center;}
.service__title{font-size: 20px;text-align: center;margin-bottom: 10px;line-height: 1.5;}
.service__title img{width: 700px;margin-top: 30px}
.service__coming{text-align: center;margin-bottom: 100px;font-weight: 700;font-size: 40px;}
.service__img{width: 380px;odject-fit: cover;display: block;margin: 0 50px 0 -100px;}
.service__img-right{margin: -200px -100px -200px 50px;}
.service__content{font-size: 18px;line-height: 2;flex-grow: 2;}
.service__attention{text-align: center;margin-top: 80px;font-size: 14px;color: #999;}

@media (max-width: 640px) {
.service__box{flex-wrap: nowrap;}
.service__title{font-size: 18px;}
.service__title img{width: 100%;}
.service__coming{font-size: 20px;margin-bottom: 70px;}
.service__img{width: 250px;margin: 0 20px 0 -90px;}
.service__img-right{margin: -30px -90px -30px 20px;}
.service__content{font-size: 15px;}
}



/* ===================================================================
CSS情報　　company
使用ファイル：すべてのファイル
=================================================================== */

.company__list{width: 640px;margin: auto;line-height: 1.8;}
.company__term{float: left;}
.company__description{margin: 0 0 30px 160px;}
.company__office{border: none;margin: 6px;height: 0;}

@media (max-width: 640px) {
.company__list{width: 100%;font-size: 14px;}
.company__description{margin-left: 100px;}
}



/* ===================================================================
CSS情報　　contact
使用ファイル：すべてのファイル
=================================================================== */

.contact{background: rgb(67,163,208);
background: linear-gradient(149deg, rgba(67,163,208,0.5) 0%, rgba(231,132,212,0.5) 66%, rgba(228,126,203,0.5) 75%, rgba(195,66,115,0.5) 100%);min-height: calc( 100vh - 188px );}
.contact__title{mix-blend-mode: overlay;}
.contact__content{margin-bottom: 30px;text-align: center;line-height: 1.5;mix-blend-mode: overlay;}
.contact dt{float:left;margin-top: 7px;mix-blend-mode: overlay;}
.contact dd{margin-bottom:20px;margin-left: 160px;mix-blend-mode: overlay;}

.contact .error{margin-top: 10px;color:#C34273;}

.contact input[type="text"]{background:#FFF;padding:14px;border:none;font-size:14px;border-radius:3px;width: calc(100% - 30px);font-family: 'Raleway', 'Noto Sans JP', sans-serif;border: 1px solid #fff;}
.contact input[type="email"]{background:#FFF;padding:14px;border:none;font-size:14px;border-radius:3px;width: calc(100% - 30px);font-family: 'Raleway', 'Noto Sans JP', sans-serif;border: 1px solid #fff;}
.contact textarea{background:#FFF;padding:14px;border:none;font-size:14px;border-radius:3px;width: calc(100% - 30px);height:200px;font-family: 'Raleway', 'Noto Sans JP', sans-serif;border: 1px solid #fff;}
.contact input:focus, .contact textarea:focus{outline: 0;border-color: #C34273;}
.contact .button{text-align:center;}
.contact .button input[type="submit"]{display:block;border:none;background:#C34273;color:#FFF;padding:15px 0;font-size:16px;width:220px;margin:10px auto;border-radius:100px;line-height:1;-webkit-appearance: none; font-family: 'Raleway', 'Noto Sans JP', sans-serif;font-weight: 400;}
.contact .button input[type="submit"]:hover{background: #B4245A;}
.contact .button a{display:block;background:#43A3D0;color:#FFF;padding:15px 0;font-size:16px;width:220px;margin:10px auto;border-radius:100px;}
.contact .button a:hover{text-decoration:none;background: #2884AF;}

@media (max-width: 960px) and (min-width: 640px) {
.contact dl{width: 640px;margin:auto;}
}
@media (max-width: 640px) {
.contact dt{font-size: 14px;float: none;margin-bottom: 10px;}
.contact dd{margin-left: 0;}
}



/* ===================================================================
CSS情報　　footer
使用ファイル：すべてのファイル
=================================================================== */

.footer{background:#111;text-align:center;color:#FFF;padding:50px;overflow:hidden;font-size: 12px;line-height: 1.5;}

@media (max-width: 640px) {
}