@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: 'Raleway', 'Noto Sans JP', sans-serif;color:#333;font-size:16px;word-break:break-all;letter-spacing: .15vw;font-weight: 100;-webkit-text-size-adjust: 100%;}

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

rt{display: none;}
[data-ruby] {
    position: relative;
}
[data-ruby]:before {
    content: attr(data-ruby);
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 62px;
    font-size: 10px;
}


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


.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: 38px;letter-spacing: 5px;text-align: center;font-weight: 100;margin-bottom: 50px;}
@media (max-width: 640px) {
.common__title{font-size: 24px;}
}
.common__title span{display: block;font-size: 16px;margin-top: 15px;color: #333;}
@media (max-width: 640px) {
.common__title span{font-size: 12px;margin-top: 10px;}
}


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

.grecaptcha-badge { visibility: hidden; }



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

.mainvisual{background:url("../img/mainvisual_bg.jpg") center no-repeat fixed #FFF;height:100svh;background-size:cover;margin-top: -64px;}
.mainvisual__inner{padding: 20px;background: rgba(255,255,255,0.85);height: calc( 100vh - 40px );}
.mainvisual__logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.mainvisual__logo svg{width: 70vw;}
.mainvisual__content{text-align: center;font-size: 20px;letter-spacing: 1px;margin-top: 50px;line-height: 1.8;}


@media (max-width: 960px) and (min-width: 640px) {
.mainvisual__content{font-size: 16px;}
}
@media (max-width: 640px) {
.mainvisual{background-attachment: scroll;background-size:80vh;}
.mainvisual__content{font-size: 4vw;margin-top: 30px;}
.mainvisual__logo svg{width: 80vw;}
}


/* logo animation */

@-webkit-keyframes animate-svg-stroke-1{0%{stroke-dashoffset:431.2659606933594px;stroke-dasharray:431.2659606933594px}100%{stroke-dashoffset:0;stroke-dasharray:431.2659606933594px}}@keyframes animate-svg-stroke-1{0%{stroke-dashoffset:431.2659606933594px;stroke-dasharray:431.2659606933594px}100%{stroke-dashoffset:0;stroke-dasharray:431.2659606933594px}}@-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-1{-webkit-animation:animate-svg-stroke-1 1s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.2s both;animation:animate-svg-stroke-1 1s cubic-bezier(0.47,0,0.745,0.715) 0s both,animate-svg-fill-1 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.2s both}@-webkit-keyframes animate-svg-stroke-2{0%{stroke-dashoffset:332.1017150878906px;stroke-dasharray:332.1017150878906px}100%{stroke-dashoffset:0;stroke-dasharray:332.1017150878906px}}@keyframes animate-svg-stroke-2{0%{stroke-dashoffset:332.1017150878906px;stroke-dasharray:332.1017150878906px}100%{stroke-dashoffset:0;stroke-dasharray:332.1017150878906px}}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-2{-webkit-animation:animate-svg-stroke-2 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s both,animate-svg-fill-2 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.3000000000000003s both;animation:animate-svg-stroke-2 1s cubic-bezier(0.47,0,0.745,0.715) 0.12s both,animate-svg-fill-2 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.3000000000000003s both}@-webkit-keyframes animate-svg-stroke-3{0%{stroke-dashoffset:431.2660217285156px;stroke-dasharray:431.2660217285156px}100%{stroke-dashoffset:0;stroke-dasharray:431.2660217285156px}}@keyframes animate-svg-stroke-3{0%{stroke-dashoffset:431.2660217285156px;stroke-dasharray:431.2660217285156px}100%{stroke-dashoffset:0;stroke-dasharray:431.2660217285156px}}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-3{-webkit-animation:animate-svg-stroke-3 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s both,animate-svg-fill-3 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.4000000000000004s both;animation:animate-svg-stroke-3 1s cubic-bezier(0.47,0,0.745,0.715) 0.24s both,animate-svg-fill-3 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.4000000000000004s both}@-webkit-keyframes animate-svg-stroke-4{0%{stroke-dashoffset:1181.182373046875px;stroke-dasharray:1181.182373046875px}100%{stroke-dashoffset:0;stroke-dasharray:1181.182373046875px}}@keyframes animate-svg-stroke-4{0%{stroke-dashoffset:1181.182373046875px;stroke-dasharray:1181.182373046875px}100%{stroke-dashoffset:0;stroke-dasharray:1181.182373046875px}}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-4{-webkit-animation:animate-svg-stroke-4 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s both,animate-svg-fill-4 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.5s both;animation:animate-svg-stroke-4 1s cubic-bezier(0.47,0,0.745,0.715) 0.36s both,animate-svg-fill-4 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.5s both}@-webkit-keyframes animate-svg-stroke-5{0%{stroke-dashoffset:890.3759155273438px;stroke-dasharray:890.3759155273438px}100%{stroke-dashoffset:0;stroke-dasharray:890.3759155273438px}}@keyframes animate-svg-stroke-5{0%{stroke-dashoffset:890.3759155273438px;stroke-dasharray:890.3759155273438px}100%{stroke-dashoffset:0;stroke-dasharray:890.3759155273438px}}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-5{-webkit-animation:animate-svg-stroke-5 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s both,animate-svg-fill-5 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.6s both;animation:animate-svg-stroke-5 1s cubic-bezier(0.47,0,0.745,0.715) 0.48s both,animate-svg-fill-5 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.6s both}@-webkit-keyframes animate-svg-stroke-6{0%{stroke-dashoffset:217.44439697265625px;stroke-dasharray:217.44439697265625px}100%{stroke-dashoffset:0;stroke-dasharray:217.44439697265625px}}@keyframes animate-svg-stroke-6{0%{stroke-dashoffset:217.44439697265625px;stroke-dasharray:217.44439697265625px}100%{stroke-dashoffset:0;stroke-dasharray:217.44439697265625px}}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-6{-webkit-animation:animate-svg-stroke-6 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s both,animate-svg-fill-6 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.7s both;animation:animate-svg-stroke-6 1s cubic-bezier(0.47,0,0.745,0.715) 0.6s both,animate-svg-fill-6 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.7s both}@-webkit-keyframes animate-svg-stroke-7{0%{stroke-dashoffset:738.4833984375px;stroke-dasharray:738.4833984375px}100%{stroke-dashoffset:0;stroke-dasharray:738.4833984375px}}@keyframes animate-svg-stroke-7{0%{stroke-dashoffset:738.4833984375px;stroke-dasharray:738.4833984375px}100%{stroke-dashoffset:0;stroke-dasharray:738.4833984375px}}@-webkit-keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-7{-webkit-animation:animate-svg-stroke-7 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s both,animate-svg-fill-7 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.8000000000000003s both;animation:animate-svg-stroke-7 1s cubic-bezier(0.47,0,0.745,0.715) 0.72s both,animate-svg-fill-7 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.8000000000000003s both}@-webkit-keyframes animate-svg-stroke-8{0%{stroke-dashoffset:325.8877868652344px;stroke-dasharray:325.8877868652344px}100%{stroke-dashoffset:0;stroke-dasharray:325.8877868652344px}}@keyframes animate-svg-stroke-8{0%{stroke-dashoffset:325.8877868652344px;stroke-dasharray:325.8877868652344px}100%{stroke-dashoffset:0;stroke-dasharray:325.8877868652344px}}@-webkit-keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-8{-webkit-animation:animate-svg-stroke-8 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s both,animate-svg-fill-8 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.9000000000000004s both;animation:animate-svg-stroke-8 1s cubic-bezier(0.47,0,0.745,0.715) 0.84s both,animate-svg-fill-8 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 2.9000000000000004s both}@-webkit-keyframes animate-svg-stroke-9{0%{stroke-dashoffset:355.03265380859375px;stroke-dasharray:355.03265380859375px}100%{stroke-dashoffset:0;stroke-dasharray:355.03265380859375px}}@keyframes animate-svg-stroke-9{0%{stroke-dashoffset:355.03265380859375px;stroke-dasharray:355.03265380859375px}100%{stroke-dashoffset:0;stroke-dasharray:355.03265380859375px}}@-webkit-keyframes animate-svg-fill-9{0%{fill:transparent}100%{fill:rgb(51,51,51)}}@keyframes animate-svg-fill-9{0%{fill:transparent}100%{fill:rgb(51,51,51)}}.logo-9{-webkit-animation:animate-svg-stroke-9 1s cubic-bezier(0.47,0,0.745,0.715) 0.96s both,animate-svg-fill-9 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 3s both;animation:animate-svg-stroke-9 1s cubic-bezier(0.47,0,0.745,0.715) 0.96s both,animate-svg-fill-9 0.2s cubic-bezier(0.755,0.05,0.855,0.06) 3s both}



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

.header{position: sticky;position: -webkit-sticky;top:0;padding:20px;height:24px;z-index:10;
-webkit-transition: background .3s ease-in;
transition: background .3s ease-in;}
.header__logo{display:block;width:100px;float: left;}
.header__menu {
position: relative;
z-index: 5;
left: 0;
top: 5px;
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: 14px;margin-left:20px;}
.header__menu a {
display: block;
color: #333;
-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: #333;
}
.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-color: #333;
}
.header__menu nav {
background: #333;
}
.header__menu li {
display: block;
margin-left: 0;
}
.header__menu a {
padding: 1.5em;
color: #FFF;
font-size: 16px;
letter-spacing: 5px;
}
.header__menu a span{
  display: inline;
  font-size: 12px;
  margin-left: 10px;
  color: #777;
}
.header__menu a:hover {
background-color: #FFF;
}
.header__toggle {
display: block;
z-index: 10;
position: absolute;
top: 0;
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: #333;
-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: #333;
-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: #FFF;
}
#header__menu-icon:checked ~ .header__menu {
display: block;
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
}



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

.about__content{line-height:2.3;margin-top: 20px;}

@media (max-width: 640px) {
.about__content{font-size: 14px;}
}



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

.service{background: linear-gradient(#f9f9f9, #eee);}
.service__box{display: flex;flex-wrap: wrap;margin: 0 -150px;}
.service__box>div{width: 25%;}
.service__title{font-size: 20px;text-align: center;margin: 0 0 20px;line-height: 1.5;font-weight: 100;}
.service__img{width: 80px;height:80px;odject-fit: cover;display: block;margin: 0 auto 20px;}
.service__content{font-size: 14px;line-height: 1.8;margin: 0 20px;}

@media (max-width: 1160px) {
.service__box{margin: -50px 0 0;}
.service__box>div{width: 50%;margin-top: 50px;}
}
@media (max-width: 640px) {
.service__box{margin: -50px -10px 0;}
.service__title{font-size: 16px;}
.service__img{width: 60px;height: 60px;}
.service__content{font-size: 12px;margin: 0 10px;}
}



/* ===================================================================
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: linear-gradient(#f9f9f9, #eee);}
.contact__content{margin-bottom: 30px;text-align: center;line-height: 1.5;}
.contact dt{float:left;margin-top: 7px;}
.contact dd{margin-bottom:20px;margin-left: 160px;}

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

.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: #ff93b0;}
.contact .button{text-align:center;}
.contact .button input[type="submit"]{display:block;border:none;background:#333;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: 100;}
.contact .button input[type="submit"]:hover{background: #212121;}
.contact .button a{display:block;background:#888;color:#FFF;padding:15px 0;font-size:16px;width:220px;margin:10px auto;border-radius:100px;}
.contact .button a:hover{text-decoration:none;background: #777;}
.contact .note{font-size: 12px;text-align: center;margin-top: 50px;line-height: 1.5;}
.contact .note a{text-decoration: underline;}

@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:#333;text-align:center;color:#FFF;padding:50px;overflow:hidden;font-size: 12px;line-height: 1.5;}

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