@charset "UTF-8";
/**********************************************************************
				RESET
**********************************************************************/
* { font-family: "Noto Sans Japanese", sans-serif;}
html, body { width: 100%; height: 100%;}
/*-- RESET STYLE --*/
html,body,div,span,
applet,object,iframe,
h2,h1,h2,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol,ul,li {
	list-style: none;
	}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
	}
h2,h1,h2,h4,h5,h6,strong,h2 em,h1 em, h2 em,h4 em,h5 em,h6 em,strong em,h2 a,h1 a,h2 a,h4 a,h5 a,h6 a {
	font-weight: bold;
	}
        
* {
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
}
button:focus { outline: none;}
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border: 0;
}
input:focus,
textarea:focus,
select:focus { outline: none;}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #4e4e4e inset;
    -webkit-text-fill-color: #fff;
}
/* clear */
ul:after,
ol:after {
    content: ".";
    clear: both;
    display: block;
    font-size: 0.1em;
    height: 0.1px;
    line-height: 0;
    visibility: hidden;
    width: 0.1px;
} 
.clear { clear:both;}
/* forIE clear */
.clear {
    clear: both;
    height: 0.1px;
    margin: 0px;
    padding: 0px;
    width: 0.1px;
}
a img,
a:hover img { backface-visibility: hidden; zoom: 1;}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
/**********************************************************************
				BASE
**********************************************************************/
* { font-family: 'Noto Sans JP', sans-serif;}
body {
    background-color: #fff;
    color: #262523;
    font-size: 14px;
    line-height: 24px;
    overflow-x: hidden;
}
.floatL { float: left;}
.floatR { float: right;}
.clrG { color: #777777;}
.clrR { color: #FF6363;}
.secTitle { display: inline-block;}
.secTitle img {
    width: auto;
    height: 60px;
    float: left;
    margin-right: 10px;
}
.secTitle p {
    display: inline-block;
    font-size: clamp(40px, 4.5vw, 80px);
    font-weight: 700;
    letter-spacing: 0.3vw;
}
.secTitle p span {
    display: block;
    line-height: 25px;
    letter-spacing: 0.05rem;
    color: #b5b5b5;
    font-size: 18px;
    margin-bottom: 10px;
}
.mainCnt {
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
}
.apr { opacity: 0; }
.aprON {
      animation: apr 1s forwards;
      -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: apr;
      -webkit-animation-name: apr;
      -moz-animation-fill-mode:forwards;
      -webkit-animation-fill-mode:forwards;
      visibility: visible !important;
}
@keyframes apr {
      0% { opacity: 0; -ms-transform:translateY(-20px); -webkit-transform:translateY(-20px); transform:translateY(-20px);}
      100% { opacity: 1; -ms-transform:translateY(0); -webkit-transform:translateY(0); transform:translateY(0);}
}
@-moz-keyframes apr {
      from { opacity: 0; -ms-transform:translateY(-20px); -webkit-transform:translateY(-20px); transform:translateY(-20px);}
      to { opacity: 1; -ms-transform:translateY(0); -webkit-transform:translateY(0); transform:translateY(0);}
}
@-webkit-keyframes apr {
      from { opacity: 0; -ms-transform:translateY(-20px); -webkit-transform:translateY(-20px); transform:translateY(-20px);}
      to { opacity: 1; -ms-transform:translateY(0); -webkit-transform:translateY(0); transform:translateY(0);}
}
.PCnone { display: none;}

/**********************************************************************
				KV
**********************************************************************/
#kv {
    width: 100%;
    height: 100vh;
    background-image: url(../images/bg_deco.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
#kv .cntArea {
    width: 70%;
    height: 100%;
    left: 15%;
    display: table;
    position: relative;
}
#kv .cntArea .cnt {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    color: #fff;
}
#kv .cntArea .cnt .logo {
    width: 7vw;
    max-width: 150px;
    min-width: 80px;
    margin-bottom: 8vh;
}
#kv .cntArea .cnt h1 {
    display: block;
    font-size: clamp(35px, 5vw, 80px);
    line-height: clamp(50px, 6.5vw, 100px);
    letter-spacing: 0.7vw;
    font-weight: 700;
}
#kv .cntArea .cnt .subtitle {
    font-size: clamp(18px, 2.5vw, 35px);
    letter-spacing: 0.1vw;
    font-weight: 500;
    margin: 5vh 0 9vh;
}
#kv .cntArea .cnt .read {
    width: 100%;
    max-width: 800px;
    font-weight: 500;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: clamp(24px, 2vw, 30px);
}
.btn {
    display: inline-block;
    padding: 10px 40px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05rem;
    font-size: 15px;
    text-decoration: none;
    background-color: #262523;
    border-radius: 100px;
}
.contactBtn { position: fixed; top: 5vw; right: 5vw; z-index: 9999;}

/**********************************************************************
				BUSINESS
**********************************************************************/
#whitezone {
    padding: 20vh 0;
    background-color: #fff;
    border-radius: 5vw;
}
#whitezone .mainCnt { position: relative; max-width: 1200px;}
#whitezone .secTitle { margin: 0 auto; display: block;}
.txtBox { 
    width: 100%;
    position: relative;
    margin: 13vh 0;
}
.txtBox img { width: 45%; float: right;}
.txtBox .txt { width: 45%; float: left;}
.txtBox:nth-child(even) img { float: left;}
.txtBox:nth-child(even) .txt { float: right;}
.txtBox strong {
    font-size: clamp(18px, 2vw, 30px);
    line-height: clamp(28px, 3.5vw, 45px);
    font-weight: 600;
    margin: 1vh 0 3vh;
    display: block;
    text-align: right;
}
.txtBox:nth-child(even) span, .txtBox:nth-child(even) strong { text-align: left;}
.txtBox p { text-align: left; display: inline-block; font-weight: 500;}
.txtBox .btn { margin-top: 30px;}
/**********************************************************************
				COMPANY
**********************************************************************/
.company {
    margin-top: 20vh;
    padding: 20vh 0 0;
    border-top: 1px #ddd solid;
}
.companyList { width: 100%; margin: 13vh 0;}
.companyList .cnt { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #ddd dashed;}
.companyList dt, .companyList dd {
    font-size: clamp(13px, 1.2vw, 18px);
    line-height: clamp(22px, 2vw, 30px);
}
.companyList dt {
    width: 10vw;
    float: left;
}
.companyList dd {
    width: calc(100% - 10vw);
    float: right;
}
/**********************************************************************
				FOUNDER
**********************************************************************/
#founder { margin-top: 25vh;}
#founder .prof { margin: 13vh 0 7vh;}
#founder .prof img { width: 200px; border-radius: 20px;}
#founder .prof .txt { width: calc(100% - 250px); font-weight: 500;}
#founder .prof .txt span {
    display: block;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.1rem;
}
#founder .prof .txt span small {
    font-size: 13px;
    display: block;
    letter-spacing: 0;
    font-weight: 600;
    margin-top: 10px;
}
#founder .cmt {
    position: relative;
    padding: 60px;
    border-radius: 20px;
    border: 2px solid #e9e9e9;
}
#founder .cmt:before,
#founder .cmt:after {
    position: absolute;
    left: 94px;
    content: "";
    height: 0;
    width: 0;
}

#founder .cmt:before {
    bottom: 100%;
    border: 13px solid;
    border-color: transparent;
    border-bottom-color: #e9e9e9;
    margin-left: -7px;
}

#founder .cmt:after {
    bottom: 99%;
    border: 14px solid;
    border-color: transparent;
    border-bottom-color: white;
    margin-left: -8px;
}
#founder .cmt p b {
    display: block;
    text-align: center;
    font-size: 20px;
    margin-bottom: 40px;
}
#founder .cmt p b span {
    font-size: 45px;
    color: #FF6363;
    margin: 0 20px;
    vertical-align: bottom;
    font-weight: bold;
}
#founder .cmt p { font-weight: 500;}
/**********************************************************************
				CONTACT
**********************************************************************/
#formSec { 
    padding: 20vh 0;
    text-align: center;
}
#formSec .secTitle p span { color: #262523;}
#formSec .notice { margin: 5vh 0 8vh; font-weight: 500;}
input, textarea {
    width: 100%;
    max-width: 600px;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    border: 0;
    border-radius: 5px;
    margin-bottom: 20px;
}
::placeholder {
    color: #BCB7B6;
    font-size: 15px;
  }
textarea { height: 150px;}
.btn.form { background-image: none; background-color: #262523; margin-top: 40px;}
.txtLink { color: #262523; margin-top: 20px; display: block;}
/**********************************************************************
				footer
**********************************************************************/
footer {  padding: 10vh 0; background-color: #262523; color: #fff;}
.logoCnt { width: calc(100% - 300px);}
.logoCnt img { width: 100px; margin-right: 50px;}
.logoCnt .info { font-size: 13px; line-height: 20px;}
.logoCnt .info b { display: block; font-size: 15px;}
.logoCnt .info .cnt { font-size: 11px; line-height: 17px; margin-top: 15px;}
.copyCnt { width: 250px; text-align: right;}
.copyCnt p { margin-top: 5px; color: #BCB7B6; font-size: 11px;}
.footNav li { display: inline-block;}
.footNav li a { padding: 0 5px; font-size: 13px; color: #fff;}
/**********************************************************************
				サンクスページ
**********************************************************************/
#thanks {
    background-color: #fff;
    padding: 15vh 0;
    min-height: calc(80vh - 143px);
}
#thanks .ttl {
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
    text-align: center;
}
#thanks .ttl span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-top: 50px;
}
#thanks img {
    width: 150px;
    margin: 0 auto 50px;
    display: block;
}
#thanks .sub {
    width: 100%;
    max-width: 600px;
    margin: 20px auto 0;
    text-align: center;
}
#thanks .btnArea { text-align: center; margin-top: 50px;}

/****************************************  mini PC (1200p) ****************************************/
@media screen and (max-width:1200px) {
.TBnone { display: none;}
.companyList .cnt { margin-bottom: 20px; padding-bottom: 20px;}
}

/****************************************  SP (1024px) ****************************************/
@media screen and (max-width:1024px) {
.PCnone { display: block;}
.SPnone { display: none;}
.mainCnt { max-width: 600px;}
.contactBtn {
    padding: 3px 15px;
    font-size: 11px;
}
#kv { height: calc(100vh - 80px); background-position: center right;}
#kv .cntArea { width: 80%; left: 10%;}
#whitezone { padding: 12vh 0;}
#whitezone .secTitle { margin: 0 auto 8vh;}
.txtArea { max-width: 600px;}
.txtBox { margin: 8vh auto;}
.txtBox img { width: 100%; margin-bottom: 3vh;}
.txtBox .txt {
    text-align: left;
    width: 100%;
}
.txtBox span {
    margin: 0;
    line-height: 50px;
    text-align: left;
}
.txtBox strong {
    text-align: left;
    margin: 10px 0 5px;
}
.txtBox p {
    font-size: 13px;
    line-height: 22px;
    width: 100%;
    margin: 20px auto 0;
}
.company { margin-top: 12vh; padding: 12vh 0 0;}
.companyList { margin: 0;}
#founder { margin-top: 12vh;}
#founder .mainCnt { max-width: 600px;}
#founder .prof { margin: 30px 0;}
#founder .prof img {
    width: 150px;
    border-radius: 10px;
    float: none;
    margin: 0 auto 20px;
    display: block;
}
#founder .prof .txt {
    width: 100%;
    font-weight: 500;
    font-size: 13px;
}
#founder .prof .txt span { font-size: 18px; text-align: center;}
#founder .prof .txt span small { font-size: 10px; margin-top: 0;}
#founder .cmt {
    padding: 30px 25px 25px;
    border-radius: 10px;
}
#founder .cmt:before {
    bottom: 100%;
    border: 12px solid;
    border-color: transparent;
    border-bottom-color: #e9e9e9;
    margin-left: 0;
    left: calc(50% - 12px);
}
#founder .cmt:after {
    bottom: 99.2%;
    border: 12px solid;
    border-color: transparent;
    border-bottom-color: white;
    margin-left: 2px;
    left: calc(50% - 14px);
}
#founder .cmt p b {
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
    padding-top: 5px;
}
#founder .cmt p b span {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
}
#founder .cmt p b span.second { left: inherit; right: 0; font-size: 35px;}
#founder .cmt p { font-size: 13px;}
#formSec { padding: 70px 0;}
#formSec .notice {
    margin: 30px 0 40px;
    font-size: 13px;
    line-height: 20px;
    text-align: left;
}
input {
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    margin-bottom: 10px;
}
.btn.form { margin-top: 10px;}
#formSec .btn.line { margin-top: 10px;}
#formSec .btnArea { margin: 40px 0 0;}

footer { padding: 70px 7.5% 50px;}
.logoCnt, .copyCnt { float: none; width: 100%;}
.logoCnt img {
    width: 90px;
    float: none;
    margin-bottom: 30px;
    display: block;
}
.logoCnt p { font-size: 12px; line-height: 19px;}
.footNav { text-align: left; margin-top: 30px;}
.copyCnt p { font-size: 10px; text-align: left;}
}

/****************************************  SP (640px) ****************************************/
@media screen and (max-width:640px) {
#kv .cntArea .cnt .subtitle { margin: 3vh 0 5vh;}
#kv .cntArea .cnt .logo { margin-bottom: 5vh;}
.companyList dt { width: 80px;}
.companyList dd { width: calc(100% - 80px);}
#thanks img { width: 120px;}
}