html {
    scroll-padding-top: 80px;
}
.banner-area{
    background: url(./img/banner-bg-1280.png) no-repeat center center / 100%, linear-gradient(180deg, #FDFEFE 0%, #F4F7FA 100%);
    padding: 15px 0 70px 0;
    text-align: center;
} 
.banner-area h4{
    border-radius: 34px;
    border: 2px solid var(--sub, #3C95C1);
    background: var(--white, #FFF);
    color: var(--sub, #3C95C1);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    position: relative;
    padding: 10px 32px;
    display: inline-block;
    margin-bottom: 10px;
}
.banner-area h4:after{
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateY(-1px) translateX(-10px);
    background: url(img/arrow-bottom.svg) no-repeat center / contain;
    width: 19px;
    height: 10px;
}
.banner-area h2 img {
    width:600px;
    padding : 15px;
    max-width: 100%;
}
.banner-area p{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    margin: 0 0 12px;
}
.banner-area .circle-data{
    display: flex;
    justify-content: center;
}
.banner-area .circle-data li{
    background: var(--sub, #3C95C1);
    height: 130px;
    width: 130px;
    border-radius: 50%;
    border: 6px solid #FFF;
    outline: 1px solid var(--sub, #3C95C1);
    margin: 0 44px 0 0;
    position: relative;
    padding: 15px 0 0;
}
.banner-area .circle-data li:last-child{margin-right: 0;}
.banner-area .circle-data li p{
    font-size: 17px;
    color: #fff;
    font-weight: 700;
    margin: 8px 0 0 0;
    line-height: 1.4;
}
.banner-area .circle-data li:after{
    content: "";
    position: absolute;
    right: -40px;
    top: 50%;
    margin-top: -14px;
    background: url(img/cross-icon.svg) no-repeat;
    width: 26px;
    height: 27px;
}
.banner-area .circle-data li:last-child:after{
    display: none;
}
.banner-area .img-container{padding-right: 0;text-align: right;}

section.area{
    padding: 40px 0;
}
.area-title {position: relative; padding: 0 0 16px; margin: 0 0 16px;}
.area-title:after{position: absolute; content: ""; width: 32px; height: 2px; background: var(--GMO_Blue, #005BAC); left: 0%; bottom: 0px;}
.area-title.bottom-arrow{display: inline-block; margin-bottom: 26px;}
.area-title.bottom-arrow:after{width: 100%;}
.area-title.bottom-arrow:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 25px;
    height: 11px;
    margin-left: -12.5px;
    background: url(img/bottom-arrow.png) no-repeat center / contain;
    z-index: 1;
}
.text-left{text-align: left;}

.area-title h4{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}
.area-title h2{
    color: var(--GMO_Blue, #005BAC);
    font-family: "Noto Sans JP";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 4px; 
}
section.area h5{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    margin: 0 0 16px;
}
section.area p{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}
.card-container > div{margin: 0 0 30px;}
.card-box {
    padding: 16px 24px;
    background: #F4F7FA;
    border-radius: 8px;
    height: 100%;
}
.card-box img{margin: 0 0 16px;}
.card-box h3{
    color: var(--black, #333);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; 
    margin: 0 0 8px;
}
.blue-bg{background:url(img/blue-bg.svg) no-repeat center center / cover;}
.blue-bg h2{
    color: var(--white, #FFF);
    font-family: "Noto Sans JP";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 4px;
}
.blue-bg h2 span{color: var(--accent, #FFE138);}
section.area.blue-bg h5{
    color: var(--white, #FFF);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    position: relative;
} 
section.area.blue-bg h5:after{content: "/"; margin-left: 5px;}
section.area.blue-bg h5:before{content: "𛰎"; margin-right: 5px;}
.blue-bg a span {position: relative;}
.blue-bg a.btn-blue span:before {background: url(./img/icon_shiryo_hover.png) no-repeat center center;width:24px;height:24px;content:"";position: absolute;left: -30px;top:0;}
.blue-bg a.btn-red span:before {background: url(./img/icon_mail.png) no-repeat center center;width:24px;height:24px;content:"";position: absolute;left: -30px;top:0;}
.blue-bg a.btn-blue:hover span:before {background: url(./img/icon_shiryo.png) no-repeat center center;}
.blue-bg a.btn-red:hover span:before {background: url(./img/icon_mail_hover.png) no-repeat center center;}
.btn{
    color: var(--GMO_Blue, #005BAC) !important;
    background: var(--white, #FFF);
    border: 3px solid var(--GMO_Blue, #005BAC);
    border-radius: 43px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.10);
    padding: 16px 24px;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    display: block;
    transition: all 0.3s ease;
    text-decoration: none;
}
.btn:hover{
    color: #fff !important;
    background: #005BAC;
    border: 3px solid var(--GMO_Blue, #005BAC);
    text-decoration: none !important;
}
.btn.btn-red{
    border: 3px solid #E65549;
    color: #fff !important;
    background: #E65549;
}
.btn.btn-red:hover{
    background: #fff;
    color:#E65549 !important;
}
.use-case{text-align: left;}
.uc-content ul li{ 
    padding: 16px;
    border-radius: 8px;
    background: #F5F5F5;
    position: relative;
    display: flex;
    align-items: center;
}
.uc-content ul li.red{border: 2px solid var(--main, #E65549); margin-top: 16px; position: relative;}
.uc-content ul li.red:before{content: ""; width: 60px; height: 60px; background: url(img/red-arrow.png); position: absolute; left: 50%; top: -40px; margin-left: -30px;}

.uc-content ul li .uc-sub{
    color: var(--black, #333);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 1.6px;
    padding-top: 32px;
    position: relative;
    min-width: 36px;
    text-align: center;
}
.uc-content ul li .uc-sub:before{content: ""; width: 24px; height: 24px; background: url(img/uc-icon-1.svg) no-repeat; position: absolute; left: 50%; margin-left: -12px; top: 0;}
.uc-content ul li.red .uc-sub{color: var(--main, #E65549);}
.uc-content ul li.red .uc-sub:before{background: url(img/uc-icon-2.svg);}
.uc-inner-content{margin: 0 0 0 16px; padding: 0 0 0 16px; border-left: 1px solid rgba(0, 0, 0, 0.10);}
section.area .uc-inner-content h5{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 32px */
    letter-spacing: 2px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #DCDCDC;
}
section.area .red .uc-inner-content h5{color: var(--main, #E65549);}
section.area .red .uc-inner-content strong{color: var(--main, #E65549); font-weight: 700;}
.use-case-box .uc-content{
    border-radius: 0 16px 16px 16px;
    border: 2px solid var(--sub, #3C95C1);
    padding: 24px;
}
.use-case-box{margin: 0 0 48px;}
.use-case-box:last-child{margin: 0;}
.use-case-box .uc-title{display: flex; align-items: center;}
.use-case-box .uc-title h3{
    color: var(--white, #FFF);
    font-family: "Noto Sans JP";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: var(--sub, #3C95C1);
    padding: 10px 20px;
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: relative;
}
.use-case-box .uc-title h3:after{
    background: var(--sub, #3C95C1);
    content: "";
    position: absolute;
    right: -57px;
    bottom: 0;
    width: 65px;
    height: 65px;
    border-left: 65px solid transparent;
    border-top: 65px solid #fff;
}
.use-case-box .uc-title h4{
    color: var(--black, #333);
    text-align: right;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 24px */
    width: 30%;
    
}
.use-case-box .uc-title h4 span{
    font-size: 64px;
    padding-left: 10px;
}
.price-table-bg{
    background: url(./img/curved-grey-bg.png) no-repeat top center /cover;
    padding-bottom:20px !important;
}
.price-table{position: relative; padding-top: 50px;}
.price-table table thead tr td{background: #f4f7fa;}
.price-table table thead tr th{
    padding: 16px;
    border-radius: 8px 8px 0 0;
    background: var(--white, #FFF);
}
.price-table table thead tr th:nth-child(2) {box-shadow: 0 0 5px rgba(0, 0, 0, 0.10);}
.price-table table thead tr th h4{
    color: var(--black, #333);
    font-family: Roboto;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 2.4px;
}
.price-table table thead tr th h4 span{
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
}
.price-table table thead tr th.preferred-plan h4, .price-table table thead tr th.preferred-plan h6{color: #005BAC;}
.price-table table thead tr th h6{font-weight: 700; margin: 0 0 8px;}
.price-table table thead tr th.preferred-plan{
    border-radius: 8px 8px 0 0;
    box-shadow: 0px -0.25px 1px 1px #005bac;
    background: #F1F9FE;
    z-index: 900;
    position: relative;
}
.price-table table thead tr th.preferred-plan:before{
    content: "月+210円で豊富な機能が使い放題";
    background: #005BAC;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    top: -42px;
    left: 20%;
    position: absolute;
    display:inline-block;
}
.price-table table thead tr th.preferred-plan:after{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #005BAC;
    position: absolute;
    top: -12px;
    left: 48%;
}
.price-table table tbody tr th, .price-table table tbody tr td{
    color: var(--black, #333);
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 10px;
}
.price-table table tbody tr th{box-shadow: 0px 0px 0px 1px #E6E6E6; background: #EFEFEF; text-align: left;vertical-align: middle;}
.price-table table tbody tr:first-child th{border-radius: 8px 0 0 0; border-top: none; box-shadow: 0px 0px 1px 1px #E6E6E6;}
.price-table table tbody tr:last-child th {border-radius: 0 0 0 8px; border: none;}
.price-table table tbody tr td{border-top: 1px solid #E6E6E6; background: #fff;}
.price-table table tbody tr td:nth-child(2) {background: #F1F9FE; box-shadow: 0px 1px 1px 1px #005bac;}
.price-table table tbody tr td i{display: inline-block; height: 20px; width: 20px; background: url(img/price-icons.png) 0 0;}
.price-table table tbody tr td i.grey-cross{background-position:0px -20px;}
.price-table table tbody tr:last-child th, .price-table table tbody tr:nth-child(2) td{border-bottom: 1px solid #E6E6E6;}
.price-table table tbody tr:last-child td:nth-child(2) {border-radius: 0 0 8px 8px;border-bottom: none;}
.blue-bg {text-align: center;}
.blue-bg h2 {font-size: 32px;}
.blue-bg h3 {font-size: 42px;color:#fff;}
.blue-bg h3 span:not(:first-child) {font-size: 42px;color: #FFE138;display: inline-block;position: relative;padding-top:24px;}
.blue-bg h3 span:not(:first-child):before {
    position: absolute;
    width: 1em;
    height: 1em;
    content: "";
    top: 0;
    left: 0;
    background-image: radial-gradient(circle at center, #FFE138 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.3em;
    margin-top: 6px;
} 
section.area.blue-bg h5 {font-size: 12px;}
.blue-bg a {font-size: 16px;}
.price-table div {background:none !important;}
.price-table table thead tr th h6 {font-size: 16px;}
.price-table table thead tr th h3 {font-size: 32px;}
.price-table table thead tr th h3 span {font-size: 48px;}
header#header {z-index: 99999;}
#submain {padding:70px 0;}

@media  screen and (max-width: 1399px) {
    .price-table table thead tr th.preferred-plan:before{ left: 15%;}
}

@media  screen and (min-width: 1281px) {
    .banner-area {background: url(./img/1920-banner-bg.png) no-repeat center center / cover, linear-gradient(180deg, #FDFEFE 0%, #F4F7FA 100%);padding:70px 0;}
    .banner-area .img-container {text-align: left;}
    .banner-area .container-fluid.banner-content {max-width: 1320px;}
    .price-table table thead tr th.preferred-plan:after {top:-12px;}
}

@media screen and (max-width: 1280px) {
    #submain {padding:55px 0;}
    .banner-area {background: url(./img/1920-banner-bg.png) no-repeat center center / cover, linear-gradient(180deg, #FDFEFE 0%, #F4F7FA 100%);}
    .banner-area .img-container {padding-top:15px;}
    .banner-content h4, .banner-content p {font-size: 14px;}
    .banner-content h2 {font-size: 48px;}
}

@media (min-width: 481px) and (max-width: 1280px) {
    .banner-area .banner-content {padding-top: 48px;}
    .use-case-box .uc-title h3 {font-size: 20px;}
    .use-case-box .uc-title h3:after {display: none;}
    .use-case-box .uc-title h4 {font-size: 18px;}
    .use-case-box .uc-title h4 span {font-size: 28px;}
    .price-table table thead tr th.preferred-plan:before {padding:8px 12px;font-size: 10px; top: -38px; left: 12%; width: max-content;}
}
@media (min-width: 767px) and (max-width: 992px) {
    .banner-area .circle-data li {min-width: 100px;height: 100px;width:100px;}
    .banner-area .circle-data li p {font-size: 12px;}
} 
@media screen and (max-width: 787px) {
    #submain {padding:25px 0;}
    .banner-area {background: url(./img/480-banner-bg.png) no-repeat center center / cover, linear-gradient(180deg, #FDFEFE 0%, #F4F7FA 100%);}
    .banner-area .img-container {padding-top:15px;}
    .blue-bg h3 span:first-child {display: block;}
    .blue-bg h3 span:not(:first-child) {margin:12px 0;}
    .preffered-plan-table {box-shadow: 0px 0px 0px 1px #005bac; border-radius: 8px;position: relative;}
    .price-table {padding-top:20px;}
    #feature2.top_feature2 .inner {padding-top: 0 !important;}
    .price-table table tbody tr:first-child th,.price-table .table-hide thead tr th ,.price-table table.table-hide tbody tr:last-child th{border-radius: 0;}
    .price-table table tbody tr td:last-child {background: none;box-shadow: none;}
    .price-table table.table-hide tbody tr:last-child td:last-child {border:1px solid #E6E6E6;}
    .price-table table tbody tr td {border:1px solid #E6E6E6;border-left: none;}
    .price-table table.preffered-plan-table tbody tr th {border-radius: 0;box-shadow: 1px -1px 0px 0px #E6E6E6;}
    .preffered-plan-table tbody tr:last-child td:last-child {border-bottom: none !important;border-right: none !important;}
    .price-table .table.table-hide thead th,.price-table .table.preffered-plan-table thead th {padding:0;padding-top:16px;}
    .price-table .table.table-hide thead tr td {border-radius: 0 0 8px 8px;}
    .price-table .table.table-hide thead tr th div,.price-table .preffered-plan-table thead tr th div {display: block;background-color: #005BAC !important;margin-top: 10px;padding:16px 80px;border-radius: 0 0 8px 8px;box-shadow: 0px 0px 0px 1px #005bac;}
    .price-table .table.table-hide thead tr th div a,.price-table .preffered-plan-table thead tr th div a{color:#fff !important;font-size: 14px;}
    .price-table .table-hide thead tr th {border-radius: 8px 8px 0 0;}
    .price-table table thead tr th.preferred-plan:before { top: -45px; left: 32%;}
    .price-table table thead tr th.preferred-plan:after {top: -20px;}
    .table.table-hide {margin-bottom: 4rem !important;}
    .close-button {background-color: #fff !important;border-radius: 0 0 8px 8px !important;}
    .price-table table thead tr th h6 {font-size: 12px;}
    .price-table table thead tr th h3 {font-size: 24px;padding-bottom: 16px;}
    .price-table table thead tr th h3 span {font-size: 32px;}
    .card-box {display: flex;}
    .area .card-box div {text-align: left;padding-left:10px;}
    .card-box img {width:72px;height:72px;margin:auto 0;padding: 0;}
    .card-box h3 {font-size: 18px; text-align: left;}
    .card-box p {font-size: 12px;}
    .blue-bg {text-align: center;}
    .blue-bg h2 {font-size: 16px;}
    .blue-bg h3 {font-size: 32px;color:#fff;}
    section.area.blue-bg h5 {font-size: 12px;}
    .blue-bg a {font-size: 16px;}
    .blue-bg a span:before {width:18px !important;height:18px !important;}
    .use-case-box .uc-title h3 {font-size: 20px;}
    .use-case-box .uc-title h3:after, .use-case-box .uc-title h4 {display: none !important;}
    .use-case-box .uc-content {border-radius: 0;}
    .use-case-box .uc-content img {padding:0 0 15px 0;}
    .use-case-box .uc-content ul li {display: block;}
    .uc-inner-content {margin: 0;padding: 0; border: none;}
    .uc-content ul li .uc-sub {padding-top: 0;}
    .uc-content ul li .uc-sub:before {left: 35%;top: 0;}
    section.area .uc-inner-content h5, section.area .red .uc-inner-content h5 {font-size: 18px;}
}

@media (min-width: 768px) and (max-width: 787px) {
    .price-table table thead tr th.preferred-plan:after {top: 4px;}
    .price-table table thead tr th.preferred-plan:before {top: -20px;}
}
@media (min-width: 768px) {
    .price-table table {border-collapse: separate;}
    .price-table table tbody tr td:nth-child(2) {background: #F1F9FE; box-shadow: 0px 1px 1px 1px #005bac;z-index: 900;
        position: relative;}
}
@media (max-width: 768px) {
    .banner-content h4 {min-width: 60%;}
}
@media (min-width: 682px) and (max-width: 786px) {
    .banner-content h4 {min-width: 50%;}
}
@media  screen and (max-width: 480px) {
     #submain {padding:15px 0;}
     .banner-area {background: url(./img/375-banner-b.png) no-repeat center center / cover, linear-gradient(180deg, #FDFEFE 0%, #F4F7FA 100%);padding: 30px;}
     .area.text-center .text-left {text-align: center;}
     .area-title:after {left: 50%; transform: translateX(-50%);width:258px;}
     .area-title h4 {font-size: 12px;}
     .area-title h2 {font-size: 28px;}
     .area img {padding-top:20px;}
     section.area p {font-size: 14px;}
     .banner-area .circle-data li {margin: 0 22px 0 0;min-width: 80px;width: 80px; height: 80px;border: 2px solid #FFF;}
     .banner-area .circle-data li p {font-size: 10px;}
     .banner-area .circle-data li span img {width:18px; height:18px;}
     .banner-area .circle-data li:after {background-size: 50%;right: -32.5px;top: 60%;}
     .price-table table thead tr th.preferred-plan:before {font-size: 12px;top: -45px !important; left: 18%; width: max-content;}
     .laurel_wreath_img picture img {padding: 16px 0 !important;}
}
@media  screen and (max-width: 300px) { 
    .banner-area .circle-data li {min-width: 70px;height: 70px;width:70px;}
    .banner-area .circle-data li p {font-size: 8px;}
}
.price_table-cards .row .free-plan > div {text-align: left;padding:15px;}
.price_table-cards .blue-list {padding-left: 0;}
.price_table-cards .blue-list li:before{content:none;}
.price_table-cards .blue-list li span {font-weight: 400;}
.price_table-cards h4 {justify-content: center;display: flex;align-items: center;min-height: 110px;font-size: 22px;line-height: 28.8px;font-weight: 700 !important;}
.price_table-cards h4 span {font-size: 0.7em; font-weight: 300; display: contents;}
.price_table-cards .row .free-plan h5 span {font-size: 36px  !important;line-height: 38.4px;}
.price_table-cards .text-grey {color: #989898;}
.price_table-cards .text-blue-dark {color: #005bac;}
.price_table-cards .text-blue-light {color: #3c95c1;}
.price_table-cards .text-orange {color: #e65549;}
.plan-details-table .left {text-align: left;}
.plan-details-table thead tr th h6 {margin-bottom: 0;font-size: 20px;line-height: 28.8px;font-weight: 350 !important;}
.plan-details-table tbody tr td, .plan-details-table tbody tr td a {text-align: center;font-size: 16px;font-weight: 400;line-height: 24px;}
 @media (max-width: 768px) {
  .price_table-cards h4 {min-height: auto;font-size: 22px;line-height: 26px;}
  .plan-details-table .left {text-align: left; text-indent: 0em;}
}

#feature2.top_feature2 article .summary p {
    margin: 80px 20px 0;
}
@media print, screen and (max-width: 741px) {
    #feature2.top_feature2 {
        padding-bottom: 0;
    }
    #feature2 article .summary {
        text-align: left !important;
    }
    #feature2 article .summary p {
        margin: 20px 20px 0 !important;
    }
}

@media (min-width: 601px) {
    .awards.awards-section {
    padding: 80px 0;
    }
    .inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    }
    .awards.awards-section .sec_title {
    font-size: 35px;
    margin: 0 0 37px;
    }
    .awards.awards-section .lead {
        font-size: 30px;
        margin: 0 0 54px;
    }
}
.awards.awards-section .sec_title {
    color: #3c95c1;
}
.awards.awards-section .lead {
    color: #e65549;
}
.awards.awards-section .lead > span {
    position: relative;
}
.awards.awards-section .lead > span::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #e65549;
    position: absolute;
    left: 0;
}
@media (max-width: 600px) {
    .awards.awards-section {
        padding: 40px 0;
    }
    .awards.awards-section .sec_title {
        margin-bottom: 20px;
    }
    .awards.awards-section .lead {
        margin-bottom: 20px;
    }
}

/* header css */
@media screen and (max-width: 860px) {
    #nav .entry.entry_btn {
        display: block !important;
    }
     #header .inner div.tel_number {
        font-weight: 600;
    }
}
@media screen and (min-width: 861px) {
    header#header .inner {display: none;}
    header#header .upper ul {margin-right: 160px;}
    #header .upper {top:-40px !important;}
    #nav .entry.entry_btn {bottom: 8px !important;}
    #header .upper div.tel_hour {
        display: block !important;
        top:-2px !important;
        left: 13px;
        font-weight: 400;
    }
    #header .upper li.header_tel span {top:-10px !important;}
    #header .upper div.tel_number {
        position: absolute !important;
        top: -10px !important;
        width: max-content;
    }
}
@media screen and (min-width: 861px) and (max-width: 1140px) {
    #header .upper {top:-15px !important;}
}

/* header navigation css */
.header-navigation {
    display: block;
    position: fixed;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
    top: 0;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.10);
}
.header-navigation img {
    max-width: 100%;
    height: auto;
    border:0;
    vertical-align: top;
}
.header-navigation .inn {
    display: flex;
    align-items: center;
}
.header-navigation .content {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 auto;
}
.header-navigation .noto {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
}
.header-navigation li {
    list-style: none;
}
.header-navigation a {
    text-decoration: none;
    color: #000;
}
.header-navigation .contact_btn a {
    box-sizing: border-box;
    border: 1px solid #e65549;
    color: #fff;
    background: #e65549;
    display: flex;
    align-items: center;
}
.sp_menu {
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
}
.header-navigation .contact_btn {
    width: 180px;
}
.header-navigation .contact_btn a {
    justify-content: center;
    font-size: 16px;
    height: 40px;
    border-radius: 20px;
    transition: background 0.3s, color 0.3s;
}
.header-navigation li {
    list-style: none;
}
.sp_menu .navi li {
    font-size: 1.25em;
    position: relative;
    border-bottom: 1px solid #403a39;
    text-align: left;
}
.sp_menu a {
    display: block;
    color: #fff;
    padding: 18px 22px;
}
.sp_menu .navi li:before {
    margin: -6px 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sp_menu .navi li:after {
    transform: rotate(135deg);
}
.sp_menu .navi li:before, .sp_menu .navi li:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 10px;
    height: 2px;
    background: #908d8d;
}
@media (min-width: 1101px) {
    .header-navigation .menu_btn {
        display: none;
    }
}
@media (max-width: 1100px) {
    .header-navigation .menu_btn {
        position: relative;
        cursor: pointer;
        z-index: 1001;
        width: 30px;
        height: 24px;
    }
    .header-navigation .menu_btn span {
        display: block;
        width: 100%;
        background: #b2b2b2;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        transition: transform 0.3s, opacity 0.3s;
        height: 4px;
    }
    .header-navigation .menu_btn span:nth-of-type(1) {
        top: 0;
    }
    .header-navigation .menu_btn span:nth-of-type(2) {
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .header-navigation .menu_btn span:nth-of-type(3) {
        bottom: 0;
    }
    .header-navigation .navi, .header-navigation .tel {
        display: none !important;
    }
    .header-navigation .contact_btn {
        margin: 0 40px 0 0;
    }
}
@media (min-width: 769px) {
    .header-navigation {
        top: 29px !important;
    }
}
@media (min-width: 768px) {
    .header-navigation {
        top: 0;
    }
    .sp_menu {
        top: 103px;
    }
}
@media (min-width: 601px) and (max-width: 768px) {
    .sp_menu {
        top: 73px;
    }
}
@media (min-width: 601px) {
    .header-navigation .inn {
        padding: 0 22px 0 43px;
    }
    .header-navigation .content {
        height: 73px;
    }
    .header-navigation .navi {
        display: flex;
        gap: 0 34px;
    }
    .header-navigation .navi li a {
        transition: background 0.3s;
    }
    .header-navigation .tel {
        margin: 0 34px 0 53px;
    }
    .header-navigation .tel a[href^="tel:"] {
        pointer-events: none;
    }
    .header-navigation .tel span {
        display: block;
        margin: 7px 0 0 20px;
        font-size: 12px;
    }
}
@media (max-width: 601px) {
    .header-navigation {
        padding: 10px;
    }
    .header-navigation .contact_btn {
        margin-right: 15px;
        padding:0 15px;
    } 
    .header-navigation .logo {
        padding:0 10px;
    }
    .sp_menu {
        top: 13.33vw;
    }
}
@media (max-width: 400px) {
    #submain {padding: 0;}
   .header-navigation .contact_btn a {
        height:25px;
        font-size: 12px;
    }
}