@charset "UTF-8";
/* CSS Document */

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #000;
font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
background: #fff;
margin: 0;
}
img{
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
video, iframe {
width: 100%;
vertical-align: bottom;
}
a, a:hover {
text-decoration: none;
color: #000;
}
i {
font-size: 0.8em;
padding-right: 5px;
}
p {
word-break: break-all;
}
.box, #merit {
margin: 0 auto;
}
.mincho {
font-family: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/* scroll-up */
.scroll-fade{
opacity: 0;
transition: all 1s;
}
.scroll-up{
opacity: 0;
transform: translateY(30px);
transition: all 1s;
}
.scroll-zoom{
opacity: 0;
transform: scale(0.7);
transition: all 1s;
}
.scroll-up.done,
.scroll-fade.done{
opacity : 1;
transform : translate(0, 0);
}
.scroll-zoom.done{
opacity : 1;
transform: scale(1.0);
}

/* #header */
#header{
width: 100%;
background: #fff;
z-index: 1000;
}
#header nav ul {
display: flex;
}
#header nav li, #header nav li a {
color: #fff;
}

#tel {
background: #8b9bce;
}
#tel a {
display: block;
font-size: 0.8em;
font-weight: 900;
}
#tel a span {
font-weight: 900;
}
#mail {
background: #004ea2;
text-align: center;
}


h2 {
background: #004ea2;
}
h2 span {
display: table;
margin: 0 auto;
color: #fff;
font-weight: bold;
}

#jcip h3 {
color: #004ea2;
font-weight: bold;
text-align: center;
}

#merit h3 {
max-width: 700px;
margin: 0 auto;
}
#merit h6 {
color: #c30d23;
font-weight: bold;
}
#merit h6 span {
font-weight: 900;
}
#merit h6 span, #attempt li span:first-child {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
#merit li:last-child {
padding-bottom: 0;
}

h4 {
text-align: center;
background: url("../images/bar.svg") no-repeat center center;
font-weight: bold;
}

#about {
background: #004ea2;
color: #fff;
}
#about h4 {
background: url("../images/bar2.svg") no-repeat center center;
}
#about h6, #about dt, #about dd {
font-weight: bold;
}
#about h6 {
display: flex;
align-items: center;
}

#reason h6 {
color: #004ea2;
font-weight: bold;
line-height: 200%;
}

#attempt ol {
display: table;
margin: 0 auto;
}
#attempt li {
display: flex;
align-items: center;
}
#attempt li:last-child {
padding-bottom: 0;
}
#attempt li span:first-child {
color: #004ea2;
font-weight: bold;
}

#form {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.soy_inquiry_message {
margin-bottom: 20px;
}
#form dd input[type="text"],#form dd input[type="email"], #form dd textarea {
width: 100%;
padding: 15px;
box-sizing: border-box;
background:#f8f8f8;
border:1px solid rgba(0, 0, 0, 0.075);
font-size:1.6rem;
}
#form dd input:focus, #form dd textarea:focus{
color: #292929;
outline: none;
border:1px solid #8BC3A3;
}
#form dd textarea {
height: 200px;
max-height: 200px;
max-width: 100%;
}
#form dd label {
margin-right: 20px;
}
input[name="confirm"], input[type="submit"] {
width:180px;
box-sizing: border-box;
display: block;
height: auto;
padding:15px;
color:#292929;
background:#8BC3A3;
border:none;
border-radius:3px;
outline: none;
transition: all 0.3s;
margin:0 auto 10px;
box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
}
input[name="confirm"]:hover, input[type="submit"]:hover {
background:#111;
color: white;
border:none;
}
input[name="confirm"]:active, input[type="submit"]:active {
opacity: 0.9;
}

#footLogo {
background: #004ea2;
}

#footer small{
display: block;
text-align: center;
}

@media (max-width: 560px){
body {
font-size: 1.6rem;
line-height: 160%;
}
section {
padding-bottom: 50px;
}

/* scroll-up */
.load-up{
opacity: 0;
transform: translateY(30px)/*スクロールアップする距離*/;
transition: all 1s/*処理にかかる時間*/;
}
.load-up.done{
opacity : 1;
transform : translate(0, 0);
}

.load-fade {
opacity : 0;
transition :all 2s/*処理にかかる時間*/;
}
.load-fade.done{
opacity : 1;
transform : translate(0, 0);
}

/*--------------------
header
--------------------*/
#header{
padding: 10px 0;
}
#header .logo{
width: 50%;
margin: 0 auto;
display: block;
}
#header nav {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
}
#header nav ul li {
padding: 8px 0;
text-align: center;
font-size: 1.4rem;
}
#header nav ul li:nth-child(1) {
width: 60%;
}
#header nav ul li:nth-child(2) {
width: 40%;
}
#tel a span {
font-size: 1.8rem;
}
#mail a i {
padding-top: 8px;
font-size: 2.4rem;
}

h2 {
font-size: 1.8rem;
padding: 3px 5%;
margin-bottom: 50px;
text-align: center;
}

#jcip h3 {
font-size: 2rem;
padding-bottom: 20px;
}

#merit h3 {
padding-bottom: 20px;
}
#merit h6 {
font-size: 1.6rem;
transform: translateX(-10px);
padding-bottom: 10px;
}
#merit h6 span {
font-size: 2.2rem;
padding-right: 3px;
}
#merit li {
padding: 0 0 20px 10px;
}

h4 {
background-size: auto 40px;
margin-bottom: 20px;
}

#about {
padding-top: 50px;
margin-bottom: 50px;
}
#about h4 {
width: 90%;
margin: 0 auto 20px;
}
#about .col2 {
width: 90%;
margin: 0 auto;
padding-bottom: 30px;
}
img.ceo {
display: block;
width: 60%;
margin: 0 auto 10px;
}
#greeting p {
padding-bottom: 20px;
}
#greeting img {
display: block;
width: 60%;
margin: 0 auto;
}

#about h6 {
font-size: 3rem;
padding-bottom: 20px;
justify-content: center;
}
#about h6 span {
font-size: 1.6rem;
padding-right: 12px;
}
#about dl:first-child {
padding-bottom: 20px;
}
#about dt {
font-size: 2rem;
padding-bottom: 5px;
}
#about dd {
font-size: 1.2rem;
}

#reason .col2 {
width: 90%;
margin: 0 auto;
}
#reason1 {
padding-bottom: 30px;
}
#reason .col2 img {
padding-bottom: 10px;
}
#reason h6 {
display: table;
margin: 0 auto;
padding-bottom: 8px;
}

#attempt h2 {
margin-bottom: 20px;
}
#attempt ol {
width: 90%;
margin: 0 auto;
}
#attempt li {
padding-bottom: 10px;
}
#attempt li br {
display: none;
}
#attempt li span:first-child {
font-size: 3rem;
padding-right: 6px;
}

#form dt {
margin-bottom:10px;
}
#form dd {
margin-bottom:25px;
}

#footer {
padding-bottom: 90px;
}
#footLogo {
padding: 20px 0 20px;
margin-bottom: 20px;
}
#footLogo img {
display: block;
width: 60%;
margin: 0 auto;
}
#footer address {
font-size: 1.4rem;
padding-bottom: 20px;
}
#footer small {
font-size: 1rem;
}
}

@media (min-width: 561px){
body {
font-size: 2rem;
line-height: 180%;
}
section {
padding-bottom: 80px;
}
a[href^="tel:"] {
pointer-events: none;
}
br.nobr {
display: none;
}

.hide{
transform: translateY(-100%); /* 上に消えるようにする */
}
/* header */
#header{
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: .5s
}
#header .logo{
position: absolute;
top: 50%;
left: 2%;
transform: translateY(-50%);
}
#header nav ul {
justify-content: flex-end;
}
#header nav ul li {
font-size: 1.8rem;
padding: 20px 10px;
}
#tel a {
padding-top: 8px;
}
#tel a span {
padding-left: 8px;
}
#mail a i {
padding-top: 10px;
}

h2 {
font-size: 2.4rem;
padding: 6px 0;
margin-bottom: 80px;
}

#jcip h3 {
font-size: 3rem;
padding-bottom: 30px;
}

#merit h3 {
padding-bottom: 30px;
}
#merit h6 {
font-size: 3.2rem;
transform: translateX(-40px);
}
#merit h6 span {
font-size: 5rem;
padding-right: 10px;
}
#merit li {
padding: 0 0 30px 40px;
}

h4 {
font-size: 3.2rem;
background-size: auto 80px;
margin-bottom: 30px;
}

#about {
padding-top: 80px;
margin-bottom: 80px;
}
#about .col2 {
padding-bottom: 50px;
}
.col2 {
display: flex;
justify-content: space-between;
}
.col2.rev {
flex-direction: row-reverse;
}
.col2 > div {
width: 48%;
}

#greeting p {
padding-bottom: 30px;
}
#greeting img {
width: 80%;
}
img.ceo, #reason2 img {
border-radius: 10px 0 0 10px;
}
#about h6 {
font-size: 5rem;
padding-bottom: 40px;
}
#about h6 span {
font-size: 2rem;
padding-right: 10px;
}
#about dl:first-child {
padding-right: 2%;
}
#about dt {
font-size: 3rem;
padding-bottom: 10px;
}

#reason1 {
padding-bottom: 50px;
}
#reason1 img {
border-radius: 0 10px 10px 0;
}
#reason h6 {
padding-bottom: 10px;
}

#attempt h2 {
margin-bottom: 30px;
}
#attempt li {
padding-bottom: 20px;
}
#attempt li span:first-child {
font-size: 8rem;
padding-right: 12px;
}

#consultation h4 {
padding: 30px 0;
}

#form dt {
margin-bottom:15px;
}
#form dd {
margin-bottom:35px;
}

#footLogo {
padding: 80px 0 30px;
margin-bottom: 30px;
}
#footLogo > div {
position: relative;
}
#footLogo > div:before {
position: absolute;
right: 0;
content: "";
display: block;
background: url("../images/bld.webp") no-repeat right top;
background-size: contain;
z-index: 3;
}
#footLogo img {
width: 48%;
}
#footer .box {
padding-bottom: 80px;
}

#footer small{
font-size: 1.4rem;
padding-bottom: 10px;
}
}

@media (min-width: 561px) and (max-width: 960px){
/* header */
#header .logo{
width: 240px;
}
#tel a span {
font-size: 3rem;
}
#mail a i {
font-size: 4rem;
}
#reason h6 {
font-size: 2.2rem;
}
}

@media screen and (min-width: 961px){
/* header */
#header .logo{
width: 320px;
}
#tel a span {
font-size: 4rem;
}
#mail a i {
font-size: 5rem;
}
#reason h6 {
font-size: 3rem;
}
}

@media (min-width: 561px) and (max-width: 1150px) {
#greeting, #reason2 > div:nth-child(2) {
padding-left: 2vw;
}
#reason1 > div:nth-child(2) {
padding-right: 2vw;
}
}

@media screen and (max-width: 1150px){
.box, #merit {
width: 90%;
}
#footLogo > div {
width: 90%;
margin: 0 auto;
}
#footLogo > div:before {
top: -110px;
width: 40%;
height: 424px;
}
}

@media screen and (min-width: 1151px){
.box {
width: 1024px;
}
#merit {
width: 960px;
}
#about .col2, #reason .col2, #footLogo > div {
width: 1024px;
margin: 0 auto;
}
img.ceo, #reason img {
border-radius: 10px;
}

#footLogo > div:before {
top: -100px;
width: 300px;
height: 424px;
}
}