@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');

/* PC */
.pc_visual{
    position:fixed;
    width:100%;
    height:100vh;
    top:0;
    background-image:url(../img/parts/bg.svg);
    background-position:bottom center;
    background-size:cover;
}

.pc_visual .logo{
    position:absolute;
    top:3vw;
    left:3vw;
    max-width:25%;
    z-index:10;
}
@media screen and (max-width: 1200px) {
.pc_visual .logo{
    max-width:20%;
}
}
@media screen and (max-width: 1024px) {
.pc_visual .logo{
    display:none;
}
}
.pc_visual .contact_bnr{
    display:block;
    position:absolute;
    bottom:12vw;
    left:5vw;
    max-width:25%;
    width:20vw;
    height:100%;
    max-height:40vh;
    background-image:url(../img/parts/contact.svg);
    background-size:contain;
    background-position: bottom;
}
.pc_visual .contact_bnr:hover{
    transform:scale(1.1);
}
@media screen and (max-width: 1200px) {
.pc_visual .contact_bnr{
    max-width:20%;
    left:3vw;
}
}


@media screen and (max-width: 1024px) {
.pc_visual .contact_bnr{
    display:none;
}
}
@media screen and (max-height: 420px) {
.pc_visual .contact_bnr{
    display:none;
}
}

.pc_visual .koshi_bnr{
    display:block;
    position:absolute;
    bottom:3vh;
    left:3vw;
    width:25%;
}
.pc_visual .koshi_bnr img{
    width:100%;
}
@media screen and (max-width: 1200px) {
.pc_visual .koshi_bnr{
    max-width:20%;
}
}
@media screen and (max-width: 1024px) {
.pc_visual .koshi_bnr{
    display:none;
}
}
.pc_visual .koshi_bnr:hover{
    transform:scale(1.1);
}


.pc_visual .pc_menu{
    position:absolute;
    top:8vw;
    right:10vw;
    z-index:10;
}
@media screen and (max-width: 1400px) {
.pc_visual .pc_menu{
    right:0;
    }
}
@media screen and (max-width: 1024px) {
.pc_visual .pc_menu{
    display:none;
}
}

.pc_visual .pc_menu li a{
    display:block;
    background-image:url(../img/icon/menu_icon.svg);
    background-position:left center;
    background-size:1em;
    padding:1vh 2em;
    color:#1A4975;
    font-weight:bold;
    font-size:23px;
}
.pc_visual #page-top{
    position:absolute;
    bottom:3vh;
    right:3vw;
}
@media screen and (max-width: 1200px) {
.pc_visual #page-top{
    max-width:20%;
}
}
@media screen and (max-width: 1024px) {
.pc_visual #page-top{
    max-width:15%;
}
}
@media screen and (min-width: 1025px) and (max-height: 500px) {
.pc_visual #page-top{
    display:none;
}
}

/* SP */
main{
    background-color:#FFF;
    width:500px;
    margin:52px auto 0;
    border-radius:35px 35px 0 0;
    position:relative;
    overflow:hidden;
    border:1px solid #F37447;
    border-bottom:none;
}
@media screen and (max-width: 768px) {
    main{
        width:100%;
        margin:0;
        border-radius:0;
        border:none;
    }
}

main section{
    padding:3em 1em;
}
main section img{
    width:100%;
    height:auto;
}
main .header{
    position:fixed;
    padding:37px;
    top:0;
    z-index: 10;
}
main #concept{
    padding:37px;
    background-image:url(../img/parts/bg_pic.webp);
    background-position:top center;
    background-size:cover;
}
@media screen and (max-width: 768px) {
main #concept{
    padding:6vw 6vw 5em;
}
}

main #concept h1 img{
    width:171px;
}
main #concept h2{
    margin-top:170px;
    margin-bottom:120px;
}
@media screen and (max-width: 1024px) {
main #concept h2{
    width:75%;
    margin-top:35vw;
    margin-bottom:22vw;
}
main #concept h2 img{
    width:100%;
}
}
main #concept p{
    color:#FFF;
    line-height:2.5;
    font-size:14.5px;
    min-height:44em;
}
@media screen and (max-width: 1200px) {
main #concept p{
    font-size:1.55vw;
}
}

@media screen and (max-width: 768px) {
main #concept p{
    font-size:3vw;
}
}


.header #sp_menu {
  position: fixed;
  top: -100vh;
  right: 0; /* メニューのwidth + padding */
  width: 100%; /* メニューのwidth */
  height: 100vh;
  padding: 1rem;
  transition: left .5s, right .5s; /* アニメーション */
  background-color: #FFF;
  background-image:url(../img/parts/bg_sp.svg);
  background-position: bottom;
  background-size:cover;
  z-index:101;
  overflow-y:auto;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
}
.header #sp_menu h1{
    max-width:170px;
}
.header #sp_menu ul{
    margin:auto;
    width: fit-content;
}
.header #sp_menu li a {
    display:block;
    background-image:url(../img/icon/menu_icon.svg);
    background-position:left center;
    background-size:1em;
    padding:0.5em 2em;
    color:#1A4975;
    font-weight:bold;
    font-size:1.5rem;
}
.header .toggle {
  display:block;
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 2em;
  cursor: pointer;
  width:2em;
  height:2em;
  line-height:2em;
  text-align:center;
  z-index:102;
  background-color:#F37447;
  text-align:center;
  border-radius:50%;
}
@media screen and (min-width: 1025px) {
.header .toggle {
    display:none;
}
}
.header .toggle:before,
.header .toggle i,
.header .toggle:after{
    position: absolute;
    right:0;
    left:0;
    margin:auto;
	content:"";
    display: block;
    height: 2px;
    width: 30%;
    background: #FFF;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
 }

/* ≡ */
.header .toggle:before{
    top: 40%;
}
.header .toggle i{
    display:none;
    top: 45%;
}
.header .toggle:after{
    top: 60%;
}


.header .toggle:hover {
  background-color: #7BC6CE;
}
.header .toggle:hover:before,
.header .toggle:hover i,
.header .toggle:hover:after{
    background: #1A4975;
}
 
.header #open {
  display: none;
}
 
/* :checked 擬似クラスを使って、#openがチェック状態になった時に、#menuが「right: 0;」になります。 */
.header #open:checked ~ #sp_menu {
	top: 0;
}
/* ≡ > ×アニメーション */
.header #open:checked + .toggle{
  background-color:#7BC6CE;
}
.header #open:checked + .toggle:before{
    top: 50%;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
    background: #1A4975;
}
.header #open:checked + .toggle i {
    width: 0;
}
.header #open:checked + .toggle:after {
    top: 50%;
    background: #1A4975;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

/* BG */
.header .bgclose{
	display:none;
}
.header #open:checked ~ .bgclose {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    text-indent: -999999px;
    overflow: hidden;
    cursor:pointer;
}
#ideal{
    padding-bottom:0;
}
#ideal h3{
    margin-bottom:0;
}
#ideal h4{
    margin-bottom: -1em;
    z-index: 1;
    position: relative;
}
#point{
    background-color:#DBEAEC;
    text-align:center;
    padding-top:1em;
}
#point h4{
    background-image:url(../img/parts/title1.svg);
    color:#FFF;
}

#point h5{
    font-weight:bold;
    margin-bottom:0.5em;
}
#point p{
    background-color:#FFF;
    padding:1em 0;
    border-radius:5px;
    font-size:18px;
    font-weight:bold;
}
@media screen and (max-width: 768px) {
#point p{
    font-size:3.5vw;
}
}
img[src*="ideal_situations04"]{
    margin-top:2em;
    width:100%;
}


#flow{
    background-color:#DBEAEC;
    text-align:center;
}
#flow .flow1 h4{
    background-image:url(../img/parts/title3.svg);
    color:#1A4975;
}
#flow .flow1 .step,
#flow .flow2 .step{
    background-color:#1A4975;
    text-align:center;
    color:#FFF;
    padding:0.5em 1em;
    border-radius:10px;
    display:block;
    width:fit-content;
    margin:0.75em auto;
    font-size:18px;
}
@media screen and (max-width: 768px) {
#flow .flow1 .step,
#flow .flow2 .step{
    font-size:3.5vw;
}
}

#flow .flow2 .step{
    background-color:#F37447;
}
#flow .flow1 p,
#flow .flow2 p{
    font-size:22px;
}
@media screen and (max-width: 768px) {
#flow .flow1 p,
#flow .flow2 p{
    font-size:4vw;
}
}
/*
#customer{
    padding:3em;
}
@media screen and (max-width: 1024px) {
#customer{
    padding:9vw;
}
}
*/
.footer{
    text-align:center;
    padding-bottom:2em;
    background-color:#FFF;
}
.footer address{
    background-color:#1A4975;
    color:#FFF;
    font-weight:bold;
    margin-bottom:100px;
    background-image:url(../img/parts/footer_bg.svg);
    background-position:top center;
    background-size:101%;
    font-style:normal;
    padding:6em 2em 1em;
}
.footer h1{
    margin-bottom:100px;
}
.footer h1 img{
    width:170px;
}
.footer h3{
    color:#FFF;
}
.footer address h5{
    font-size:22px;
}
@media screen and (max-width: 768px) {
.footer address h5{
    font-size:5vw;
}
}

.footer address p{
    font-size:20px;
}
@media screen and (max-width: 768px) {
.footer address p{
    font-size:4vw;
}
}

.footer address p small{
    font-size:0.75em;
}
.footer strong{
/*
    font-size:2.3em;
*/
    font-size:43px;
    font-weight:normal;
}
.footer a{
    color:#FFF;
    border-bottom:1px solid #FFF;
    font-size:18px;
    margin-top:0.5em;
    display:inline-block;
}
.footer .btn{
    display:block;
    margin:2em 0;
    border-radius:5em;
    color:#1A4975;
    text-align:center;
    background-color:FFF;
    padding:1.5em;
    background-image:url(../img/icon/menu_icon2.svg);
    background-position:right 1em center;
    background-size:1.5em;
    font-size:22px;
    font-weight:bold;
}

@media screen and (max-width: 768px) {
.footer .btn{
    font-size:4vw;
}
}
.footer .btn:hover{
    transform:scale(1.1);
}
.footer > small{
    font-size:15px;
}
@media screen and (max-width: 768px) {
.footer > small{
    font-size:3vw;
}
}
label[for="koshi_sp"]{
    position:fixed;
    left:3vw;
    bottom:3vh;
    width:fit-content;
    max-width: 40%;
    cursor:pointer;
    z-index:10;
}
@media screen and (min-width: 769px) {
label[for="koshi_sp"]{
    display:none;
}
}
label[for="koshi_sp"] img[src*="close"]{
    position:absolute;
    right: -3vw;
    top: -3vw;
}
label[for="koshi_sp"] .koshi_bnr_sp{
    display:block;
}
label[for="koshi_sp"] .koshi_bnr_sp:hover{
    transform:scale(1.1);
}

#koshi_sp{
    display:none;
}
#koshi_sp:checked ~ label {
    display:none;
}