@charset "UTF-8";
/* *****************************************************************
リセット
文字
パーツ
ヘッダー
ナビ
SPナビ
はじめに
私たちについて
事業紹介
フッター
アニメ
***************************************************************** */
/* *****************************************************************
リセット
***************************************************************** */
:root {
    --main_color: #f39a00;
    --sub_color:#ff444a;
    --sub2_color:#ed6c00;
}
* {
    margin: 0;
    padding: 0;
	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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {line-height:1;}
article, aside, dialog, figure, footer, header,
hgroup, 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;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
    text-decoration: 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 #000;
	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;}
ul, ol {list-style: outside none none;}
article, aside, details, footer, header, main, menu, nav, section, summary {display: block;}

/* *****************************************************************
文字共通
***************************************************************** */
body {
	font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 2;
	-webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}
h1, h3, h4, h5, h6 {font-size: 100%; font-weight: 700;}
h2{font-size: 2.535vw; line-height: 1.45; letter-spacing: 0.2em;}
a {color: var(--sub2_color); transition: all 0.3s ease;}
a:hover, a:active {color: #777777;}
a:focus {outline: medium none;}
.en{
    font-family: Arial, Helvetica, "sans-serif";
    color: var(--main_color);
    letter-spacing: 0;
    font-weight: 700;
}
.en span{
    font-size: 131%;
    margin-left: .3em;
}
.small{font-size: 40%;}
.bold{font-weight: bold;}
.t_center{text-align: center;}
.main_c{color: var(--main_color);}
.sub_c{color: var(--sub_color);}
.sub2_c{color: var(--sub2_color);}
.white_c{color: #fff;}
.black_c{color: #000;}
@media screen and (max-width: 1280px) {
    body {font-size: 16px; line-height: 1.8;}
    h2{font-size: 2.812vw;}
}
@media screen and (max-width: 850px) {
    h2{font-size: 4.2vw;}
}
@media screen and (max-width: 640px) {
    body {font-size: 15px;letter-spacing: 0.05em;}
    h2{font-size: 26px; letter-spacing: 0.15em;}
}

/* *****************************************************************
パーツ
***************************************************************** */
html, body {
    height: 100%;
    width: 100%;
	word-wrap: break-word;
}
html {overflow-y: scroll;}
#wrapper {
	width: 100%;
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
}
section{
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #fff;
}
.contents{
    width: 90%;
    max-width: 1100px;
    margin: auto;
}
.flex{
    display: flex;
    flex-wrap: wrap;
}
.between{
    justify-content: space-between;
}
img {
    width: 100%;
    height: auto;
    border: medium none;
    vertical-align: middle;
}
.bg_black_trans{background-color: rgba(0,0,0,.7);}
.bg_black{background-color: #222;}
.bg_orenji{background-color: #fbe2cc;}
.pc_only,.sp_no{display: block;}
.sp_only{display: none;}
@media screen and (max-width: 850px) {
    section{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .contents{
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    .pc_only{display: none;}
}
@media screen and (max-width: 640px) {
    section{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .sp_only{display: block;}
    .sp_no{display: none;}
}

@media (min-width: 850px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}


/* *****************************************************************
ヘッダー
***************************************************************** */
#bg-selector{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
header {
    width: 100%;
    height: 100vh;
	margin: 0 auto;
    padding: 0 5%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
header h1.logo{
    width: 100%;
    margin-top: 5vh;
}
header h1.logo img{
    width: 80%;
    max-width: 400px;
    margin:0 auto 40px;
    display: block;
}
header h2{
    width: 100%;
    text-align: center;
    font-size: 2.8vw;
    letter-spacing: 0.2em;
    margin-bottom: 3em;
}
header h2 span{
    line-height: 1.6;
}
header h2 span.fade{
    transform: translateX(-150%);
    animation-name: fadeslide;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: calc(0.03s * var(--txtindex));
    opacity: 0;
}
@keyframes fadeslide {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
header p{
    margin-top: 1em;
    margin-bottom: auto;
    text-align: center;
    font-size: 1.2vw;
}
.scroll {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}
.chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}
.chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #000;
}
.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
}
.chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
}
@keyframes move {
  25% {opacity: 1;}
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}
.scroll_text {
    display: block;
    margin-top: 75px;
    margin-left: -40px;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .25;
    animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 850px) {
    header p{
        font-size: 1em;
    }
}
@media screen and (max-width: 640px) {
    header h1.logo img{
        width: 95%;
    }
    header h2 {
        font-size: 20px;
    }
}


/* *****************************************************************
ナビ
***************************************************************** */
.scroll-prevent {
    position: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.navi{
    position: fixed;
    z-index: 999;
    top: 10px;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    padding: .5em 2em;
    border-radius: 30px 0 0 30px;
}
.navi ul{
    display: flex;
}
.navi ul li{
    margin-left: 1.5em;
}
.navi ul li a{
    font-size: 14px;
    line-height: 1.5;
    color: #000;
    position: relative;
    display: inline-block;
}
.navi ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: var(--sub2_color);
  transition: .3s;
}
.navi ul li a:hover::after {
  width: 100%;
}
.navi ul li a:hover {
    color: var(--sub2_color);
}


/* *****************************************************************
spメニュー
***************************************************************** */
.sp_nav{display: none;}
@media screen and (max-width: 850px) {
    .navi{display: none;}
    .sp_nav{display: block;}
    .navi_area{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    .menu{
        height: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 30px;
        z-index: 99;
    }
    .menu__line{
        background: var(--main_color);
        display: block;
        height: 2px;
        position: absolute;
        transition:transform .3s;
        width: 100%;
    }
    .menu__line--center{
        top: 9px;
    }
    .menu__line--bottom{
        bottom: 0;
    }
    .menu__line--top.active{
        top: 8px;
        transform: rotate(45deg);
        background: #fff;
    }
    .menu__line--center.active{
        transform:scaleX(0);
    }
    .menu__line--bottom.active{
        bottom: 10px;
        transform: rotate(135deg);
        background: #fff;
    }
    .gnav{
        background: rgba(0,0,0,0.90);
        display: none;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 98;
    }
    .gnav__wrap{;
        height: 100%;
        width: 100%;
    }
    .gnav__menu{
        padding: 50px 40px;
    }
    .gnav__menu__item{
        margin: 0 0 1.5em;;
    }
    .gnav__menu__item a{
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px 0;
        display: block;
    }
    .gnav__menu__item a:hover{
        color: #666;
    }
}


/* *****************************************************************
はじめに
***************************************************************** */
.start .contents{
    position: relative;
}
.start .left{
    width: 52%;
    display: flex;
    flex-direction: column;
}
.start .left h2{
    font-size: 42px;
    margin-bottom: 2em;
}
.start .left .txt{
    margin-top: auto;
    line-height: 2.2;
    padding-bottom: 1em;
}
.start .photo{
    width: 48%;
    padding-top: 3em;
}
@media screen and (max-width: 850px) {
    .start .left,.start .photo{
        width: 100%;
        text-align: center;
    }
    .start .left h2{
        font-size: 4.7vw;
        margin-bottom: 1em;
    }
    .start .photo img{
        max-width: 500px;
    }
}
@media screen and (max-width: 640px) {
    .start .left h2{
        font-size: 24px;
    }
}


/* *****************************************************************
私たちについて
***************************************************************** */
.us h2{
    margin-bottom: 1.2em;
}
.us ul{
    justify-content: center;
    margin-top: 100px;
}
.us ul li{
    width: 17.5%;
    min-width: 155px;
    margin: 0 1.25% 5%;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.us ul li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
.us ul li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-size: 20px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
}
.us ul li a:hover{
    background-color: var(--main_color);
}
.us ul li a.many{
    padding-top: 1em;
}
.us ul li .icon{
    width: 35.135%;
    position: absolute;
    top: -13%;
    left: 0;
}
@media screen and (max-width: 640px) {
    .us .txt{text-align: left;}
    .us ul{
        margin-top: 50px;
    }
    .us ul li{
        min-width: 140px;
        margin: 0 3% 25px;
    }
    .us ul li a{
        font-size: 16px;
    }
}


/* *****************************************************************
事業紹介
***************************************************************** */
.business .left{
    width: 33%;
    padding-right: 2.5em;
}
.business .left h2{
    letter-spacing: .05em;
    margin-bottom: .5em;
}
.business .left .txt{
    font-size: 15px;
    line-height: 1.8;
}
.business .right{
    width: 67%;
}
.business .right ul li{
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
}
.business .right ul li .photo{
    width: 37.5%;
}
.business .right ul li .txt_area{
    width: 62.5%;
    padding-left: 1.5em;
    letter-spacing: 0;
    font-size: 15px;
    line-height: 1.7;
}
.business .right ul li .txt_area h3{
    font-size: 30px;
    line-height: 1.3;
}
.business .right ul li .txt_area h3 span{
    font-size: 55%;
    display: block;
}
.business .right ul li .txt_area p{
    margin-top: .5em;
}
@media screen and (max-width: 850px) {
    .business .left,.business .right{
        width: 100%;
        padding-right: 0;
    }
    .business .left .txt{
        line-height: 1.6;
        margin-bottom: 1.5em;
    }
    .business .right ul li{
        padding-top: 1.5em;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 640px) {
    .business .left h2{
        font-size: 32px;
        margin-bottom: 0.2em;
        line-height: 1.3;
    }
    .business .right ul li .photo{
        width: 100%;
        max-width: 400px;
        margin: 0 auto 1em;
    }
    .business .right ul li .txt_area{
        width: 100%;
        padding-left: 0;
    }
    .business .right ul li .txt_area h3{
        font-size: 22px;
    }
}


/* *****************************************************************
フッター
***************************************************************** */
footer {
    width: 100%;
    background-color: #000;
    color: #fff;
    padding-top: 120px;
}
footer .contents{
    padding-bottom: 120px;
}
footer .flex{
    margin-top: 30px;
}
footer .logo{
    width: 37.3%;
}
footer .add{
    width: 62.7%;
    padding-left: 2em;
    font-size: 17px;
    line-height: 1.5;
    margin-top: .5em;
}
footer .add p span{
    margin-right: 1em;
}
footer .map {
    position: relative;
    width: 100%;
    padding-top: 32.812%;
    margin-top: 20px;
}
footer .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}	
footer .copy{
    font-size: 12px;
    line-height: 1;
    text-align: center;
    padding: 15px 1em;
    background-color: var(--sub2_color);
}
@media screen and (max-width: 850px) {
    footer {
        text-align-last: center;
        padding-top: 80px;
    }
    footer .contents{
        padding-bottom: 80px;
    }
    footer .logo,footer .add{
        width: 100%;
    }
    footer .logo img{
        max-width: 350px;
        margin-bottom: 20px;
    }
    footer .add{
        padding-left:0;
        font-size: 14px;
    }
}
@media screen and (max-width: 640px) {
    footer {
        padding-top: 50px;
    }
    footer .contents{
        padding-bottom: 50px;
    }
    footer .logo img{
        max-width: 300px;
    }
    footer .map {
        padding-top: 100%;
    }
    footer .add p span{
        margin-right: 0;
        display: block;
    }
}

/* *****************************************************************
アニメ
***************************************************************** */
.animate_start{
    animation-name: fade-left;
    animation-duration: 1.2s;
}
@keyframes fade-left{
    0%{
        opacity: 0;
        transform: translateX(-80px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.animate_nav{
    animation-name: fade;
    animation-duration: 5s;
}
@keyframes fade{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.animate_slide.anime_wrap,.animate_up.anime_wrap{opacity: 0;}
.animate_slide.anime_wrap.show{
    animation-name: fade-left2;
    animation-duration: 1s;
    opacity: 1;
}
@keyframes fade-left2{
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.animate_up.anime_wrap.show{
    animation-name: fade-up;
    animation-duration: 1s;
    opacity: 1;
}
@keyframes fade-up{
    0%{
        opacity: 0;
        transform: translateY(50px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.business .anime_wrap.left{
    opacity: 0;
    transform: translateY(60px);
    transition: .5s;
}
.business .anime_wrap.left.show{
    transform: translateY(0);
    opacity: 1;
}
.business .right ul li.anime_wrap,
.business .right ul li.anime_wrap.white{
    opacity: 0;
    transition: 2s;
}
.business .right ul li.anime_wrap.show,
.business .right ul li.anime_wrap.show.white{
    opacity: 1;
}
.business .right ul li.anime_wrap.show{
    border-bottom: 1px solid #000;
}
.business .right ul li.anime_wrap.show.white{
    border-bottom: 1px solid #fff;
}
.anime_wrap .photo{
    opacity: 0;
    transform: translateX(-40px);
    transition: 1s;
}
.anime_wrap.show .photo{
    opacity: 1;
    transform: translateX(0);
}
.anime_wrap .txt_area{
    opacity: 0;
    transform: translateX(-40px);
    transition: 1s;
    transition-delay: 1s;
}
.anime_wrap.show .txt_area{
    opacity: 1;
    transform: translateX(0);
}
@media screen and (max-width: 850px) {
    .business .right ul li.anime_wrap.show{
        border-bottom: none;
        border-top: 1px solid #000;
    }
    .business .right ul li.anime_wrap.show.white{
        border-bottom: none;
        border-top: 1px solid #fff;
    }
}