@charset "utf-8";




/*
Base style
*/
body {
    font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 2;
    color:#333;
    background-color: #fff;
}
img {
    width: 100%;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
th,td {
    vertical-align:top;
    text-align: left;
}
.h--numbers {
    color: #1787B7;
    font-family: "Arial", 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 56px;
    font-weight: bold;
}
.h--large {
    margin: 0;
    font-size: 40px;
}
.h--medium {
    margin: 0;
    font-size: 27.2px;
    line-height: 1.5em;
}
.text--regular {
    font-size: 16.8px;
    font-weight: 400;
    line-height: 2.3em;
}
.text--medium {
    font-size: 19.2px;
    font-weight: 500;
    line-height: 1.9em;
}
.text--bold {
    font-size: 19.2px;
    font-weight: bold;
    line-height: 1.9em;
}
.text--regular--caption {
    font-size: 11.2px;
    font-weight: 400;
    line-height: 0;
}

/*
スライドイン動き設定 ここから//////
*/
.anim {
    opacity: 0;
}
/* 左から ここから
（適用したい要素に次のクラス名を追加する「class="anim-box slidein--left anim"」） */
.anim-box.slidein--left.is-animated {
    animation: slideIn--left 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn--left {
    0% {
    transform: translateX(-800px);
    opacity: 0;
    }
    100% {
    transform: translateX(0);
    }
    40%,100% {
    opacity: 1;
    }
}
/* 左から ここまで */

/* 右から ここから
（適用したい要素に次のクラス名を追加する「class="anim-box slidein--right anim"」） */
.anim-box.slidein--right.is-animated {
    animation: slideIn--right 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn--right {
    0% {
    transform: translateX(800px);
    opacity: 0;
    }
    100% {
    transform: translateX(0);
    }
    40%,100% {
    opacity: 1;
    }
}
/* 右から ここまで */

/* 下から ここから
（適用したい要素に次のクラス名を追加する「class="anim-box slidein--bottom anim"」） */
.anim-box.slidein--bottom.is-animated {
    animation: slideIn--bottom 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn--bottom {
    0% {
    transform: translateY(500px);
    opacity: 0;
    }
    100% {
    transform: translateY(0);
    }
    40%,100% {
    opacity: 1;
    }
}
/* 下から ここまで */

/* 768px以下は動き無効設定　ここから */
@media screen and (max-width: 768px) {
    .anim {
        opacity: 1;
    }
    .anim-box.slidein--left.is-animated,
    .anim-box.slidein--right.is-animated,
    .anim-box.slidein--bottom.is-animated {
       animation: none;
    }
}
/* 768px以下は動き無効設定　ここまで */

/*
スライドイン動き設定 ここまで//////
*/



/* PCのみ固定バナー ここから */
.btn--fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 260px;
    z-index: 2;
    margin: 0;
    padding: 0;
    transition: 0.3s;
}
.btn--fixed .list__item > a {
    display: inline-block;
    width: 100%;
    padding: 7px 20px;
    filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
    transition: all .3s;
}
.btn--fixed .contact-btn--form {
    position: relative;
}
.btn--fixed .contact-btn--form > a {
    background-color: #F40621;
}
.btn--fixed .contact-btn--tel > a {
    background-color: #162C8D;
}

@media (hover: hover) {
    .btn--fixed .contact-btn--form > a:hover,
    .btn--fixed .contact-btn--tel > a:hover {
        background-color: #707070;
    }
}
@media (hover: none) {
    .btn--fixed .contact-btn--form > a:active,
    .btn--fixed .contact-btn--tel > a:active {
        background-color: #707070;
    }
}

.btn--fixed .contact-btn .list__item img {
    width: 100%;
}
@media screen and (max-width: 640px) {
    .btn--fixed {
        display: none;
    }
}

/* PCのみ固定バナー ここまで */

/* 背景色設定　ここから */
.bgcolor-red {
    background-color: #FF0320;
}
.bgcolor-blue {
    background-color: #162C8D;
}
.bgcolor-lightblue {
    background-color: #E3F2FF;
}
/* 背景色設定　ここまで */

/* ページ内アンカー用 */
#point,
#product,
#profile {
    padding-top: 80px;
    margin-top:-80px;
}
@media screen and (max-width: 768px) {
    #point {
        padding-top: 150px;
        margin-top:-150px;
    }
    #product{
        padding-top: 200px;
        margin-top:-200px;
    }
    #profile {
        padding-top: 180px;
        margin-top:-180px;
    }
    #contact {
        padding-top: 100px;
        margin-top:-100px;
    }
}

/* 改行の表示非表示設定 ここから */
.br--none {
    display: none;
}
@media screen and (max-width: 768px) {
    .br--none {
        display: block;
    }
}
/* 改行の表示非表示設定 ここまで */

@media screen and (max-width: 900px) {
    body {
        height: 100%;
        width: 100%;
    }
    .h--numbers {
        font-size: 40px;
    }
    .h--medium {
        font-size: 20.8px;
    }
    .h--large {
        position: static;
        font-size: 25.6px;
    }
    .text--regular {
        font-size: 12.8px;
        margin: 0;
    }
    .text--bold {
        font-size: 14px;
    }
}


/*
section
*/
.section {
    padding: 60px 0 100px;
}
.section--bgcolor-gray {
    background-color: #F7F7F7;
}
.section-main {
    width: 75%;
    margin: 50px auto 0;
}
.section-main--secondary {
    width: 64%;
    margin: 0 auto;
}
.section-main--big {
    width: 80%;
    margin: 0 auto;
}
@media screen and (max-width: 900px) {
    .section {
        margin: 0;
        padding: 30px 0;
    }
    .section-main,
    .section-main--big,
    .section-main--secondary {
        width: 95%;
    }
    .section-main::after,
    .section-main--big::after,
    .section-main--secondary::after {
        content:'';
        display: block; 
        clear:both;
    }
    .section--bgcolor-blue,
    .section--bgcolor-gray {
        margin: 0;
    }
    .section--bgcolor-gray {
        padding: 0 0 30px 0;
    }
}
@media screen and (max-width: 768px) {
}

/*
grid
*/
.grid {
    display: flex;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
}
.grid--item {
    position: relative;
}
.grid--col-2 > .grid--item {
    width: calc(100% / 2);
    margin: 0 10px 0 0;
}
.grid--col-2 > .grid--item:last-child {
    margin: 0;
}
.grid--col-2 > .grid--itemleft {
    width: 70%;
    margin: 0 30px 0 0;
}
.grid--col-2 > .grid--itemright {
    width: 30%;
    margin: 0 30px 0 0;
}
.grid--col-3 > .grid--item {
    width: calc(100% / 3);
    margin: 0 30px 0 0;
}
.grid--col-3 > .grid--item:last-child {
    margin: 0;
}
.grid--col-4 > .grid--item {
    width: calc(100% / 4);
}

@media screen and (max-width: 768px) {
    .grid {
        display: block;
    }
    .grid--col-2 > .grid--item {
        width: 100%;
        margin: 0;
    }
    .grid--col-3 > .grid--item {
        width: 100%;
        margin: 0;
    }
    .grid--col-4 > .grid--item {
        width: 80%;
        margin: 0 auto;
    }
}


/*
header
*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}
.header--bgcolor {
    background-color: #fff;
}
.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 90px;
    margin: 0;
}
.header-logo {
    width: 15%;
    margin: 0 0 0 100px;
}
.header-logo > a {
    display: block;
}
.header-logo > a img {
    max-width: 260px;
}
/* .header__list-wrap {} */
.header__list-wrap .list {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__list-wrap li.list__item > a {
    display: block;
    position: relative;
    padding: 20px 20px 5px 20px;
    margin-bottom: 10px;
    color: #707070;
    font-size: 14px;
    text-decoration: none;
}

@media (hover: hover) {
    .header__list-wrap li.list__item > a:hover {
        color: #1787B7;
    }
}
@media (hover: none) {
    .header__list-wrap li.list__item > a:active {
        color: #1787B7;
    }
}

.header__list-wrap--sp--show {
    display: none;
    text-align: center;
}
.header__list-wrap--sp--show img {
    display: block;
    width: 150px;
    margin: 100px auto 50px;
}
.header__list-wrap--sp--show small {
    color: #fff;
}
.heade__bnr-wrap {
    display: flex;
    height: 90px;
    margin: 0;
}
.heade__bnr-wrap.sp--show {
    display: none;
}
.heade__bnr a {
    display: block;
    height: 90px;
    padding: 20px 25px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .heade__bnr a:hover {
        background-color: #707070;
        transition: all 0.2s;
    }
}
@media (hover: none) {
    .heade__bnr a:active {
        background-color: #707070;
        transition: all 0.2s;
    }
}

.heade__bnr-2 a {
    display: block;
    height: 90px;
    padding: 20px 100px 20px 25px;
}
.heade__bnr-wrap img {
    width: auto;
    height: 100%;
}
.header__list-wrap .header-logo-wrap__sp--show {
    display: none;
}

@media screen and (max-width: 1090px) {
    .header-logo {
        margin: 0 0 0 40px;
    }
    .heade__bnr-2 a {
        padding: 20px 40px 20px 25px;
    }
    .header__list-wrap li.list__item > a {
        padding: 20px 15px 5px 15px;
    }
}
@media screen and (max-width: 900px) {
    .header-logo {
        width: 230px;
        padding: 10px 0 10px 20px;
        margin: 0;
    }
    .heade__bnr-wrap.sp--hidden {
        display: none;
    }
    .heade__bnr-wrap.sp--show {
        display: flex;
        width: 100%;
        height: auto;
    }
    .heade__bnr-wrap img {
        width: 100%;
        height: auto;
    }
    .heade__bnr a {
        height: auto;
        padding: 25px;
    }
    .heade__bnr-2 a {
        padding: 20px 25px;
    }
    .heade__bnr {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__list-wrap .header-logo-wrap__sp--show {
        display: block;
        background-color: #fff;
    }
    .header__list-wrap{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        /*ナビのスタート位置と形状*/
        top:0;
        right: -120%;
        width:100%;
        height: 100vh;/*ナビの高さ*/
        background:#333;
        /*動き*/
        transition: all 0.6s;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /*アクティブクラスがついたら位置を0に*/
    .header__list-wrap.panelactive{
        right: 0;
    }
    
    /*ナビゲーション*/
    .header__list-wrap .list {
        /*ナビゲーション天地中央揃え*/
        display: block;
        position: static;
        z-index: 999;
        padding: 50px 3%;
        background-color: #1787B7;
    }
    
    /*リストのレイアウト設定*/
    
    .header__list-wrap li{
      list-style: none;
        text-align: left;
        border-bottom: 1px solid #fff;
    }
    .header__list-wrap li:first-child{
        border-top: 1px solid #fff;
    }
    
    .header__list-wrap li:nth-of-type(5){
        border-bottom: none;
    }
    .header__list-wrap li:last-child > a {
    margin-left: 0;
    padding: 20px;
    border-radius: 0;
    filter: none;
    }
    .header__list-wrap li.list__item > a {
        transition: all .3s;
        padding: 15px 30px;
        margin-bottom: 0;
        color: #fff;
    }
    @media (hover: hover) {
        .header__list-wrap li.list__item > a:hover {
            color: #fff;
            background-color: #116c93;
        }
    }
    @media (hover: none) {
        .header__list-wrap li.list__item > a:active {
            color: #fff;
            background-color: #116c93;
        }
    }
    /* 矢印設定　START */
    .header__list-wrap li.list__item--icon > a::after{
        content: '';
        border: 0;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        display: inline-block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    /* 矢印設定　END */
    .header__list-wrap--sp--show {
        display: block;
        margin: 0 3%;
    }
    .header__list-wrap--sp--show .contact-btn {
        margin: 0 auto 20px;
        padding: 0;
        text-align: center;
    }
    .header__list-wrap--sp--show .contact-btn--title {
        margin: 0;
    }
    .header__list-wrap--sp--show .contact-btn--title h2 {
        width: 80%;
        margin: 50px auto 30px;
        font-size:16px;
        line-height: 1.5em;
        color: #fff;
    }
    .header__list-wrap--sp--show .contact-btn .list {
        display: block;
        padding: 0;
        margin: 0;
    }
    .header__list-wrap--sp--show .contact-btn .list__item {
        width: 100%;
        margin: 0;
        line-height: 0;
        border-top: none;
        border-bottom: none;
    }
    .header__list-wrap--sp--show .contact-btn .list__item > a {
        display: inline-block;
        width: 100%;
        padding: 40px 30px;
        outline: 1px solid #fff;
        outline-offset: -15px;
        filter:none;
        transition: all .3s;
    }
    .header__list-wrap--sp--show .contact-btn--form {
        position: relative;
    }
    .header__list-wrap--sp--show .contact-btn--form > a {
        background-color: #F40621;
    }
    .header__list-wrap--sp--show .contact-btn--tel > a {
        background-color: #162C8D;
    }

    @media (hover: hover) {
        .header__list-wrap--sp--show .list__item.contact-btn--form > a:hover,
        .header__list-wrap--sp--show .list__item.contact-btn--tel > a:hover {
            background-color: #707070;
        }
    }
    @media (hover: none) {
        .header__list-wrap--sp--show .list__item.contact-btn--form > a:active,
        .header__list-wrap--sp--show .list__item.contact-btn--tel > a:active {
            background-color: #707070;
        }
    }

    .header__list-wrap--sp--show .contact-btn .list__item img {
        width: 100%;
        margin: 0;
    }


    /*========= ボタンのためのCSS ===============*/
    .openbtn1{
      position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
      right: -30px;
      cursor: pointer;
        width: 100px;
        height:50px;
    }
      
    /*×に変化*/  
    .openbtn1 span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 2px;
        border-radius: 2px;
      background-color: #1787B7;
        width: 30%;
      }
    
    .openbtn1 span:nth-of-type(1) {
      top:15px; 
    }
    
    .openbtn1 span:nth-of-type(2) {
      top:23px;
    }
    
    .openbtn1 span:nth-of-type(3) {
      top:31px;
    }
    
    .openbtn1.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    
    .openbtn1.active span:nth-of-type(2) {
      opacity: 0;
    }
    
    .openbtn1.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}
@media screen and (max-width: 768px) {
    .header-main {
        margin: 0 auto;
    }
    .header-logo {
        width: 40%;
        min-width: 200px;
    }
}


/*
main-image
*/
.main-image--sp--hide {
    display: block;
    line-height: 0;
}
.main-image--sp--show {
    display: none;
}
@media screen and (max-width: 768px) {
    .main-image--sp--hide {
        display: none;
    }
    .main-image--sp--show {
        display: block;
    }
}

/* 選ばれる理由 START */
/*
point
*/
.point--bgimg {
    background-image: url(../image/point--bgimg.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
.point {
    text-align: center;
}
.point h2.point--h {
    margin: 0;
}
.point h2.point--h img {
    width: 460px;
}
.point > p {
    margin: 40px 0 90px;
}
.point .list__item--img {
    position: relative;
    width: 100%;
}
.point-01 h3,
.point-02 h3,
.point-03 h3 {
    display: flex;
    margin: 0 0 20px 0;
    font-size: 40px;
    font-size: clamp(36px, 3vw, 40px);
    line-height: 1.4em;
    align-items: center;
    text-align: left;
}
.point-02 h3 span {
    position: relative;
    top: 45px;
    line-height: 1.2em;
}
.point-02 h3 span small {
    font-size: 28px;
}
.point-01 h3 img,
.point-02 h3 img,
.point-03 h3 img {
    width: 120px;
    margin-right: 20px;
}
.point--text--wrap {
    margin-top: 50px;
    text-align: left;
}
.point--text--wrap h4 {
    padding-bottom: 20px;
    margin: 0;
    font-size: 24px;
    line-height: 1.5em;
    border-bottom: #333 1px solid;
}
.point--list img {
    margin-top: 45px;
}
.point--list img.img--shadow {
    filter: drop-shadow(5px 5px 5px #707070);
}
.point-02 p {
    text-align: left;
}
.point-02 img {
    margin-top: 30px;
}
.point-03 {
    margin-top: 60px;
}
.point-03 .grid--col-2 > .grid--item-left {
    width: 30%;
    margin: 0 70px 0 0;
}
.point-03 .grid--col-2 > .grid--item-right {
    width: 70%;
    margin: 0;
}
.point-03 .point--list {
    margin-bottom: 50px;
}
.point-03 .point--list .grid--item-left img,
.point-03 .point--text--wrap{
    margin-top: 0;
}
.point-03 .point--text--wrap img {
    margin-top: 30px;
}
@media screen and (max-width: 900px) {
    .point .list__item--text {
        font-size: 14.4px;
    }
}
@media screen and (max-width: 768px) {
    .point .list__item, 
    .point .list__item:first-child {
        margin: 0 auto 20px;
    }
    .point-03 .grid--col-2 > .grid--item-left,
    .point-03 .grid--col-2 > .grid--item-right {
        width: 100%;
        margin: 0 0 50px 0;
    }
    .point-03 .grid--col-2 > .grid--item-left img {
        max-width: 230px;
        width: 70%;
    }
}
@media screen and (max-width: 640px) {
    .point-01,
    .point-02,
    .point-03 {
        margin-top: 30px;
    }
    .point-03 {
        margin-bottom: 50px;
    }
    .point-01 h3,
    .point-02 h3,
    .point-03 h3 {
        font-size: 21px;
    }
    .point-01 h3 img,
    .point-02 h3 img,
    .point-03 h3 img {
        width: 70px;
        margin-right: 10px;
    }
    .point h2.point--h img {
        width: 80%;
    }
    
    .point--list img {
        margin-top: 0;
    }
    .point-02 h3 span {
        top: 25px;
    }
    .point-02 h3 span small {
        font-size: 14px;
    }
}
/* 選ばれる理由 END */


/* 専用プレイヤー START */
.player__h--large--bgcolor {
    background-color: #1787B7;
    padding: 1em 45px;
}
.player__h--large {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.4em;
    text-align: left;
}
.player--list {
    padding: 35px 30px 45px 45px;
}
.player--text--wrap {
    margin: 0;
    text-align: left;
}
.player--text--wrap h3 {
    padding-bottom: 20px;
    margin: 0;
    color: #1787B7;
    font-size: 28px;
    line-height: 1.5em;
}
.player--text--wrap h4 {
    padding-bottom: 20px;
    margin: 0;
    font-size: 24px;
    line-height: 1.5em;
    border-bottom: #333 1px solid;
}
.player--list .player--text--wrap img {
    margin-top: 30px;
}
.player--list img {
    margin: 0;
}
.player--list .grid--item-left {
    width: 65%;
    margin: 0 30px 0 0;
}
.grid--col-2.player--list .grid--item-right {
    position: relative;
    bottom: 130px;
    margin-bottom: -130px; /*余白を解消する値を入れます*/
    width: 35%;
    text-align: center;
}
.player--list .player--list__item--img {
    width: 80%;
    margin-top: 30px;
}
.player--list .player--text--wrap img.img--sp--hidden {
    display: block;
}
.grid--col-2.player--list .grid--item-right img.img--sp--show {
    display: none;
}
@media screen and (max-width: 768px) {
    .player--section {
        padding: 30px 0 0 0;
    }
    .player__h--large--bgcolor {
        padding: 1em 20px;
    }
    .player__h--large {
        font-size: 21px;
        text-align: center;
    }
    .player--list {
        padding: 30px 20px 100px;
    }
    .player--list .grid--item-left {
        width: 100%;
    }
    .grid--col-2.player--list .grid--item-right {
        position: initial;
        width: 100%;
        margin-bottom: 0;
    }
    .grid--col-2.player--list .grid--item-right img {
        width: 80%;
    }
    .player--list .player--list__item--img {
        width: 100%;
    }
    .player--list .player--text--wrap img.img--sp--hidden {
        display: none;
    }
    .grid--col-2.player--list .grid--item-right img.img--sp--show {
        display: block;
        width: 100%;
        margin-top: 100px;
    }
    .player--text--wrap h3 {
        font-size: 21px;
        text-align: center;
    }
    .player--text--wrap h4 {
        font-size: 20px;
    }
}
/* 専用プレイヤー END */


/* 製品仕様 START */
/*
product
*/
.product {
    color: #707070;
}
.product__h--large--bgcolor {
    background-color: #707070;
    padding: .7em;
}
.product__h--large {
    color: #fff;
    font-size: 19px;
    letter-spacing: .2em;
    text-align: center;
    margin: 0;
}
.product {
    margin-top: 100px;
}
.product--pc {
    display: block;
}
.product--sp {
    display: none;
}
.product__table--list {
    width: 100%;
    margin: 0 0 30px;
}
.product__table--list caption {
    padding: .3em 10px;
    text-align: left;
    font-size: 21px;
}
.product__table--list tr:last-child {
    padding: 20px;
    border-bottom: 1px solid #F0F0F0;
}
.product__table--list__item {
    border-top: 1px solid #F0F0F0;
}
.product__table--list__item td {
    padding: .5em .5em .5em 10px;
    font-size: 14px;
}
.product--pc .product__th {
    width: 20%;
}
.product--pc .product__td {
    width: 30%;
}
.product--pc .product__td--3 {
    width: 80%;
}
.product--img {
    width: 80%;
    margin: 100px auto 0;
}
@media screen and (max-width: 900px) {
    .product__table--list__item th {
        padding: 30px 20px;
    }
    .product__table--list__item td {
        padding: 30px 20px 30px 0;
    }
}
@media screen and (max-width: 768px) {
    .product--section {
        padding: 0;
    }
    .product {
        margin-top: 40px;
    }
    .product__h--large {
        font-size: 19px;
    }
    .product__table--list__item th {
        line-height: 1.9em;
    }
    .product__table--list__item td {
        line-height: 1.9em;
    }
    .product--pc {
        display: none;
    }
    .product--sp {
        display: block;
    }
    .product--sp .product__table--list caption {
        font-size: 16px;
    }
    .product--sp .product__table--list tr:last-child {
        border-bottom: none;
    }
    .product--sp .product__th {
        width: 40%;
        font-size: 12px;
        padding: 1em 10px;
    }
    .product--sp .product__td {
        width: 60%;
        font-size: 12px;
        padding: 1em 10px;
    }
    .product--sp .product__td--3 {
        width: 80%;
    }
}
/* 製品仕様 END */



/* お問い合わせ START */
/*
contact
*/
.contact_box {
    width: 95%;
    margin: auto;
}
.contact--title {
    width: 100%;
    margin: 60px auto;
    padding: 70px 0 50px 0;
    border-radius: 29px;
}
.contact__h--large--bgcolor {
    background-color: #1787B7;
    padding: .7em;
}
.contact__h--large {
    color: #fff;
    font-size: 19px;
    letter-spacing: .2em;
    text-align: center;
    margin: 0;
}
.contact--wrap {
    padding: 30px 0;
    text-align: center;
}
.contact--img {
    width: 267.2px;
}
.contact--text {
    text-align: left;
    color: #707070;
}
.contact--wrap .text--regular {
    font-size: 16px;
    letter-spacing: .2em;
    line-height: 1.5em;
    margin-top: 50px;
}
#contact__form {
    width: 100%;
}
.contact__form--table{
    width:100%;
    margin:0 auto;
    border-collapse:collapse;
}
.contact__form--item {
    margin: 30px 0;
}
.contact__form--item-title,
.contact__form--item-text-box{
    padding:0;
}
.contact__form--item-title{
    width:25%;
    font-size: 19.2px;
    font-weight: normal;
    letter-spacing: .1em;
    vertical-align: middle;
}
.contact__form--item-title--secondary {
    vertical-align: top;
    position: relative;
    top: 30px;
}
.contact__form--item-text{
    display: block;
    width: 100%;
    height: 70px;
    margin: 20px 0;
    padding: 4px 30px;
    line-height: 1.42857143;
    color: #676565;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 18.4px;
    letter-spacing: .1em;
}
.contact__form--item-text--secondary {
    height: 200px;
    padding-top: 17px;
}
.contact__form_sm{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #676565;
    border-radius: 70px;
    background-color: #fff;
}
.contact__form--item-text--left,
.contact__form--item-text--right{
    width: 48%;
}
.contact__form--item-text--left{
    float: left;
    
}
.contact__form--item-text--right{
    float: right;
}
.contact__form--item-text--list {
    position: relative;
    width: 60%;
    margin: 20px;
}
/* ドロップダウン 矢印の設定 START */
.contact__form--item-text--list::after {
    position: absolute;
    top: 45%;
    right: 50px;
    width: 23px; /* 矢印の大きさ */
    height: 15px; /* 矢印の大きさ */
    background-color: #707070;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none; /* 矢印部分もクリック可能にする */
    content: ""; 
}
.select {
    appearance: none; /* デフォルトの矢印を消す */
    min-width: 230px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
}
/* ドロップダウン 矢印の設定 END */
.hissu{
    margin: 7px 15px 7px 7px;
    color: #FF0229;
    text-align: right;
    float: right;
    font-size: 14.4px;
    font-weight: 400;
}
#contact__form .text--regular {
    font-size: 16.8px;
    letter-spacing: normal;
    color: #707070;
}
.privacy--link {
    color: #60C2ED;
}

.contact--btn--text {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;

    width: 350px;
    margin: 50px auto;
    padding: 10px 42px  10px 40px;
    border-radius: 30px;
    filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
    background-color: #000;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all .3s;
}

@media (hover: hover) {
    .contact--btn--text:hover {
        background-color: #707070;
    }
}
@media (hover: none) {
    .contact--btn--text:active {
        background-color: #707070;
    }
}

@media screen and (max-width: 900px) {
    .contact--title {
        width: 100%;
    }
}
@media screen and (max-width: 900px) {
    .contact--title-main {
        width: 100%;
    }
    .contact--title {
        padding: 0;
    }
    .contact__h--large {
        font-size: 16.8px;
    }
}
@media screen and (max-width: 768px) {
    .contact_box {
        width: 100%;
    }
    .contact--img {
        width: 64%;
    }
    .contact--wrap .text--regular {
        font-size: 14.4px;
        letter-spacing: 0em;
        line-height: 1.8em;
        margin-top: 30px;
    }
    .text--regular--caption {
        font-size: 9.6px;
        line-height: 1.4em;
    }
    .contact__form--item th,
    .contact__form--item td {
        width: 100%;
        display: inline-block;
    }
    .contact__form--item-text--list {
        margin: 0;
    }
    .contact__form--item-text--list::after {
        top: 33%;
        right: 30px;
        width: 18px;
        height: 11px;
    }
    .contact__form--item-text {
        height: 50px;
        padding: 0 15px;
        margin: 0 0 20px;
        font-size: 11.2px;
    }
    .contact__form--item-text--left,
    .contact__form--item-text--right {
        width: 49%;
    }
    .contact__form--item-title--secondary {
        position: static;
    }
    .contact__form--item-text--secondary {
        padding-top: 17px;
    }
    .hissu {
        margin: 0 15px;
        float: none;
        font-size: 9.6px;
    }
    .contact__form--item th {
        font-size: 12.8px;
    }
    #contact__form .text--regular {
        width: 72%;
        margin: auto;
        font-size: 12.8px;
        text-align: left;
    }
}
@media screen and (max-width: 450px) {
    .contact--btn--text {
        width: 80%;
    }
}
/* お問い合わせ END */


/* 運営会社 START */
/*
profile
*/
.profile {
    margin-top: 100px;
}
.profile__h--large--bgcolor {
    background-color: #707070;
    padding: .7em;
}
.profile__h--large {
    color: #fff;
    font-size: 19px;
    letter-spacing: .2em;
    text-align: center;
    margin: 0;
}
.profile__table--list {
    width: 100%;
    margin: 0 0 30px;
}
.profile__table--list tr:last-child {
    padding: 30px;
    border-bottom: 3px solid #EFEFEF;
}
.profile__table--list__item {
    border-top: 3px solid #EFEFEF;
}
.profile__table--list__item th {
    padding: 30px;
}
.profile__table--list__item td {
    padding: 30px 30px 30px 0;
}
.profile__table--list__item th {
    width: 25%;
}
.profile__table--list__item td {
    width: 75%;
}
@media screen and (max-width: 900px) {
    .profile__table--list {
        color: #707070;
    }
    .profile__table--list__item {
        border-top: 1px solid #EFEFEF;
    }
    .profile__table--list tr:last-child {
        border-bottom: 1px solid #EFEFEF;
    }
    .profile__table--list__item th,
    .profile__table--list__item td {
        padding: 15px 10px;
    }
}
@media screen and (max-width: 768px) {
    .profile__h--large {
        font-size: 19px;
    }
    .profile__table--list__item th {
        line-height: 1.9em;
    }
    .profile__table--list__item td {
        line-height: 1.9em;
    }
}
/* 運営会社 END */


/*
contact-btn
*/
.contact--section {
    padding: 10px 0;
}
.contact-btn {
    margin: 0 auto 50px;
    text-align: center;
}
.contact-btn--title {
    margin: 0;
}
.contact-btn--title h2 {
    font-size: 30px;
    line-height: 1.4em;
}
.contact-btn .list {
    display: flex;
    padding: 0;
    margin: 0;
    text-align: left;
}
.contact-btn .list__item {
    width: 100%;
    margin: 0;
}
.contact-btn .list__item > a {
    display: inline-block;
    width: 100%;
    padding: 40px 30px;
    outline: 1px solid #fff;
	outline-offset: -15px;
    filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
    transition: all .3s;
}
.contact-btn--form {
    position: relative;
}
.contact-btn--form > a {
    background-color: #F40621;
}
.contact-btn--tel > a {
    background-color: #162C8D;
}

@media (hover: hover) {
    .contact-btn--form > a:hover,
    .contact-btn--tel > a:hover {
        background-color: #707070;
    }
}
@media (hover: none) {
    .contact-btn--form > a:active,
    .contact-btn--tel > a:active {
        background-color: #707070;
    }
}

.contact-btn .list__item img {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .contact-btn {
        width: 100%;
        padding: 0;
    }
    .contact-btn--title h2 {
        font-size: 18px;
        margin-bottom: 30px;
    }
    .contact-btn .list {
        display: block;
    }
}



/*
footer
*/
.footer {
    padding: 35px 0 0;
}
.footer--wrap {
    position: relative;
    width: 75%;
    margin: 0 auto;
}
.footer--bgcolor {
    background-color: #1787B7;
}
.footer--main {
    width: 50%;
    margin: 0 auto 25px;
}
.footer__list-wrap {
    margin: 0 0 40px 0;
}
.footer__list-wrap .list {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer__list-wrap li.list__item > a {
    display: block;
    padding: 10px;
    color: #fff;
    font-size: 11.2px;
    font-weight: normal;
    letter-spacing: .2em;
    text-decoration: none;
}
.footer--logo {
    position: absolute;
    top: 10px;
    left: 0;
    width: 200px;
    margin: 0 auto;
}
.footer-copy--bgcolor {
    background-color: #162C8D;
}
.footer-copy {
    display: block;
    padding: 1em 0;
    color: #fff;
    font-size: 8px;
    font-weight: 400;
    text-align: center;
}
@media screen and (max-width: 1250px) {
    .footer--wrap {
        width: 90%;
    }
}
@media screen and (max-width: 1050px) {
    .footer--logo {
        position: initial;
        margin: 0 auto 50px;
    }
    .footer__list-wrap .list {
        padding: 0;
    }
    .footer--main {
        width: 70%;
    }
}
@media screen and (max-width: 640px) {
    .footer--logo {
        min-width: 120px;
        width: 40%;
    }
    .footer--main {
        width: 100%;
    }
    .footer__list-wrap {
        margin: 0 0 60px 0;
    }
    .footer__list-wrap li.list__item > a {
        padding: 5px;
    }
}



.thanks--title {
    position: relative;
    width: 72%;
    margin: 60px auto 0;
    padding: 70px 0 60px 0;
    border-radius: 29px 29px 0 0;
}
.thanks--title--deco {
    position: absolute;
    top: 60px;
    right: 170px;
    width: 115px;
}
.thanks--title-main {
    width: 590px;
    margin: 0 auto;
}
.thanks--wrap {
    padding: 30px 0;
    text-align: center;
}
.thanks__h--numbers {
    color: #1787B7;
    margin: 0;
    font-size: 87.2px;
    line-height: 1em;
    letter-spacing: .02em;
}
.thanks__sp--active {
    display: none;
}
.thanks__sp--hide {
    display: block;
}
.thanks__h--medium {
    padding: 10px;
    background-color: #1787B7;
    color: #fff;
    font-size: 16.8px;
    font-weight: bold;
    letter-spacing: .2em;
}
.thanks--text .text--medium {
    text-align: left;
    font-size: 14.4px;
    line-height: 2em;
}
.thanks--back {
    position: relative;
    width: 72%;
    margin: 0 auto;
    padding: 20px;
    background-color: #707070;
}
.thanks--back > a {
    display: block;
    color: #fff;
    font-size: 16.8px;
    font-weight: bold;
    letter-spacing: .2em;
}
.thanks--back--deco {
    position: absolute;
    bottom: -20px;
    left: 25px;
    width: 95px;
}
@media screen and (max-width: 900px) {
    .thanks {
        margin: 2%;
    }
    .thanks--title {
        width: 100%;
        padding: 70px 0 30px 0;
    }
    .thanks--title--deco {
        top: 60px;
        right: 50px;
    }
}
@media screen and (max-width: 580px) {
    .thanks--title-main {
        width: 72%;
        margin: 0 auto;
    }
    .thanks__h--numbers {
        padding-bottom: 7px;
        font-size: 73.6px;
        line-height: 0.8em;
    }
    .thanks__h--medium {
        font-size: 12.8px;
        letter-spacing: .05em;
    }
    .thanks--text .text--medium {
        font-weight: normal;
        font-size: 12.8px;
    }
    .thanks__sp--active {
        display: block;
    }
    .thanks__sp--hide {
        display: none;
    }
    .thanks--back {
        padding: 10px;
    }
    .thanks--back > a {
        font-size: 14.4px;
    }
    .thanks--title--deco {
        top: 180px;
        right: 20px;
        width: 67px;
    }
    .thanks--back--deco {
        width: 54px;
    }
}