/* header */

html {
    scroll-behavior: smooth;
}

.pc-hidden {
    display: none;
}

.box {
    animation-fill-mode: forwards;
}

.spbr{
	display: none;
}

section,
article {
    scroll-margin-top: 10rem;
}

a {
    display: block;
}

body {
    font-family: "游明朝", "YuMincho", serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    position: relative;
}

img.w100 {
    max-width: 100%;
}

header {
    height: 10.6rem;
    background-color: #000;
    position: fixed;
    z-index: 99;
    width: 100%;

}

.inner.w1720 {
    max-width: 172rem;
    width: 90%;
    margin: auto;
}

header .inner {
    padding: 3.7rem;
    display: flex;
    justify-content: space-between;
}

a.logo {
    z-index: 90;
}

a.logo img {
    width: 32rem;
    height: auto;
}

.h_right {
    display: flex;
}

a.line {
    background-color: #e9a53a;
    color: #190707;
    font-size: 1.8rem;
    height: 8rem;
    width: 30rem;
    padding: 0 3.6rem;
    border-radius: 4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    position: relative;
    margin-right: 3rem;
    z-index: 90;
    box-shadow: 3px 3px 5px 0px rgba(227, 229, 234, 1);
    transition: all .5s;
}

a.line:hover {
    background-color: #FFF;
    color: #190707;
    transition: all .5s;
}

a.line-w,
a.line.white {
    background-color: #FFF;
    color: #190707;
}

a.line.white:hover {
    background-color: #e9a53a;;
    transition: all .5s;
}

a.line.active {
    background-color: #FFF;
    color: #190707;
    transition: all .5s;
}

a.line::before,
a.line.white:hover::before{
    
    content: "";
    left: 3.7rem;
    position: absolute;
    background-image: url(../img/mail.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 2.5rem;
    height: 2.4rem;
}


/* a.line.active::before,
a.line.white::before,
a.line:hover::before {
    background-image: url(../img/line_g.svg);
}

/* menu */
.openbtn2 {
    position: relative;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    display: flex;
    height: 8rem;
    width: 8rem;
    justify-content: center;
    align-items: center;
    border-radius: 4rem;
    box-shadow: 2.121px 2.121px 5px 0px rgba(227, 229, 234, 0.004), -2.121px -2.121px 5px 0px rgba(255, 255, 255, 0.004);
    background-color: #ffffff;
    z-index: 90;
    cursor: pointer;
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn2 {
    position: relative;
    /*ボタン内側の基点となるためrelativeを指定*/
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 90;
}

/*ボタン内側*/

.openbtn2 span {
    display: inline-block;
    transition: all .4s;
    /*アニメーションの設定*/
    position: absolute;
    height: 3px;
    width: 3rem;
    background-color: #666;
}


.openbtn2 span:nth-of-type(1) {
    top: 3.4rem;
    left: 2.5rem;
}

.openbtn2 span:nth-of-type(2) {
    left: 2.5rem;
    bottom: 3.3rem;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn2.active span:nth-of-type(1) {
    top: 2rem;
    left: 1.6rem;
    transform: translateY(2rem) translateX(1rem) rotate(-45deg);
}

.openbtn2.active span:nth-of-type(2) {
    top: 3.2rem;
    left: 1.6rem;
    transform: translateY(8px) translateX(1rem) rotate(45deg);
}

.menu-content {
    width: 100%;
    height: 57rem;
    position: fixed;
    top: -42rem;
    left: 0;
    padding: 15rem 0 10.5rem;
    z-index: 80;
    background-color: #f2f3f3;
    visibility: hidden;
    transition: all .5s;
}

.menu-content.active {
    visibility: visible;
    transition: all .5s;
    top: 0;
}

.menu-content ul li {
    list-style: none;
}

.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 2.2rem;
    box-sizing: border-box;
    color: #111111;
    text-decoration: none;
    position: relative;
    padding-top: 2.5rem;
}

.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    right: 11px;
    top: 16px;
}

/* menu */

.menu-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    max-width: 120rem;
    width: 100%;
    margin: auto;
}

.menu-list .list-item {
    position: relative;
    margin-bottom: 3.6rem;
    width: 48%;
    margin-right: 9.9rem;
}

.menu-list .list-item:nth-child(4),
.menu-list .list-item:nth-child(7) {
    margin-bottom: 0;
}

.menu-list .list-item:nth-child(n+5) {
    margin-right: 0;
}

.menu-list .list-item:before {
    content: attr(data-title);
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding-bottom: 1rem;
    font-size: 1.6rem;
    padding-left: 1.2rem;
}

.menu-list .list-item:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 1.4rem;
    background-color: #e9a53a;
    top: 0;
    left: 0;
}

/* menu */


.inner.w1200,
.w1200 {
    max-width: 120rem;
    width: 90%;
    margin: auto;
}

.ttl {
    font-size: 4rem;
    text-align: center;
    position: relative;
}


.ttl:before {
    content: attr(data-title);
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 2.4rem;
    padding-bottom: 2.4rem;
    top: -6.4rem;
    font-weight: normal;
}

.ttl:after {
    content: "";
    position: absolute;
    top: -2.4rem;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #666;
}

.contact h2::after {
    width: 7rem;
    height: 5px;
}

.des {
    font-size: 2.4rem;
    line-height: 5rem;
    text-align: center;
}

.des strong {
    font-size: 2.4rem;
    padding: 0 8px;
    margin-bottom: 0;
}

.flexwrap {
    display: flex;
    justify-content: center;
}


.swiper-pagination-bullet {
    border-radius: 0;
    background-color: #f2f3f3;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #111;
}

/* PROF */
.bg-g {
    background-color: #f2f3f3;
    background: linear-gradient(180deg, #f2f3f3 0%, #f2f3f3 89%, #FFF 89%, #FFF 100%);
}



/* THANKS */
.thanks {
    margin-bottom: 15rem;
	padding-top: 24rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.thanks .ttl {
    margin-bottom: 4.3rem;
	font-size: 2.8rem;

}
.thanks .des {
    margin-bottom: 8.1rem;
	font-size: 2.1rem;
	text-align: left;
    font-weight: normal;
}

.btn_tc{
	text-align: center;
}

.btn-thanks {
  background: transparent;
  color: #111;
  border: 2px solid #111;
  padding: 1.8rem 3.6rem;
  font-size: 2.1rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  
  &:hover {
    background: #111;
    color: #fff;
    transform: translateY(0);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.bg-w {
    background-color: #FFF;
}


/* バナー横 */
.bnr-line {
    max-width: 100rem;
    width: 100%;
    margin: auto auto 21.4rem;
    position: relative;
    box-shadow: 3px 3px 5px 0px rgba(227, 229, 234, 1);
}

.bnr-line img {
    position: absolute;
    left: 13.3rem;
    bottom: 3.2rem;
    width: 24.8rem;
    height: 36.5rem;
}

.bg-w {
    background-color: #FFF;
}

.bnr-line .bg-w {
    padding-top: 4.2rem;
    padding-bottom: 2rem;
}

.bnr-line .bg-b {
    padding: 3.5rem 0;
}

.bnr-line .bg-w strong {
    color: #000;
    margin-bottom: 0;
}

.bg-b {
    background-color: #190707;
}

.bnr-line p {
    font-size: 1.8rem;
    color: #190707;
    text-align: center;
    margin-right: 12.1rem;
    margin-left: auto;
    width: 42.8rem;
    line-height: 3.4rem;
    position: relative;
}

.bnr-line p::before,
.bnr-line p::after {
    height: 4.2rem;
    top: 9px;
}

a.line.white {
    margin-right: 12.1rem;
    margin-left: auto;
    width: 36rem;
    box-shadow: 2.121px 2.121px 5px 0px rgba(227, 229, 234, 0.004);
    padding: 0 9rem;
}

a.line.white::before,
a.line.white:hover::before {
    left: 9.6rem;
}

/* バナー横 */

.r-list {
    display: flex;
}

.r-list .list-item {
    width: 53rem;
    margin-right: 6.2rem;
    background-color: #FFF;
    padding: 5rem 0 4.8rem;
    text-align: center;
    box-shadow: 3px 3px 5px 0px rgba(227, 229, 234, 1);
}

.r-list .list-item:last-child {
    margin-right: 0;
}

.r-list .list-item img {
    margin-bottom: 5.5rem;
}

.r-list .list-item:first-child img {
    width: 16.7rem;
    height: 24.2rem;
}

.r-list .list-item:nth-child(2) img {
    width: 13.9rem;
    height: 23.7rem;
}

.r-list .list-item:last-child img {
    width: 13.8rem;
    height: 24.2rem;
}

.color-b {
    color: #6e87c3;
}

.color-r {
    color: #ea8071;
}

.color-g {
    color: #73b3be;
}

.r-list .list-item h4 {
    max-width: 43.6rem;
    font-size: 2.2rem;
    line-height: 3.2rem;
    width: 80%;
    margin: auto auto 3rem;
}

.r-list .list-item p {
    max-width: 43.6rem;
    font-size: 1.6rem;
    line-height: 3.2rem;
    text-align: left;
    width: 80%;
    margin: auto;
}

/* CONTACT */
.contact {
    position: relative;
    text-align: center;
    padding: 27rem 0 15rem 0;
}

.contact .bg {
    position: absolute;
    bottom: 0;
    height: 237rem;
    width: 100%;
    z-index: -1;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.contact h2 {
    padding-bottom: 3.2rem;
    margin-bottom: 7rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-weight: normal;
}

.contact h2::after {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    ;
}

.form {
    padding: 7.7rem 0 7.9rem;
}

.contact .catch {
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 14.25px rgba(71, 69, 69, 0.3);
    line-height: 6rem;
    margin-bottom: 9.7rem;
}

.contact__inner {
    max-width: 103.9rem;
    width: 100%;
    margin: auto auto 6rem;
}

.contact__inner tr {
    display: flex;
}

.contact__inner th {
    font-size: 1.8rem;
    margin-bottom: 5.8rem;
    margin-right: 5.5rem;
    min-width: 22.5rem;
}

.contact__inner td {
    font-size: 1.6rem;
    width: 100%;
    text-align: left;
    display: flex;
}

.privacy {
    flex-direction: column;
    align-items: flex-start;
}

.contact__inner .required {
    background-color: #d73e3e;
    color: #FFF;
    font-size: 1.2rem;
    line-height: 2.2rem;
    padding: 0 1.4rem;
    border-radius: 1.1rem;
    margin-left: 1.9rem;
    vertical-align: middle;
}

input[type="text"],
textarea {
    background-color: #f2f3f3;
    height: 5rem;
    width: 100%;
    text-align: left;
    padding: 1rem;
}

.checkbox {
    cursor: pointer;
}

.checkbox input {
    display: none;
}

.checkbox span {
    position: relative;
    display: block;
    width: 3rem;
    height: 3rem;
    background-color: #f2f3f3;
    margin-right: 1.2rem;
}

input[type="checkbox"]:checked+span::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 3rem;
    height: 2rem;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-color: #111;
    transform: rotate(-45deg);
}

textarea {
    height: 24rem;
    margin-bottom: 3.9rem;
}

.privacy--box {
    height: 21rem;
    overflow: scroll;
    padding: 2.9rem;
    border: 1px solid #dbdbdb;
    text-align: left;
    margin-bottom: 3rem;
}

label[for] {
    margin-right: 1.8rem;
    display: flex;
    height: 3rem;
    align-items: center;
}

[type="checkbox"] {
    -webkit-appearance: none;

}

label.mailbtn {
    display: block;
    margin: auto;
    width: 28rem;
    color: #FFF;
    background-color: #111111;
    border-radius: 4rem;
    line-height: 8rem;
    font-size: 1.8rem;
    height: 8rem;
    box-shadow: 2px 2px 5px 0px rgba(227, 229, 234, 1);
    transition: all .5s;
}

label.mailbtn:hover {
    background-color: #FFF;
    color: #111111;
    transition: all .5s;
}

/* CONTACT */
/* FOOTER */
footer {
    padding: 10rem 0;
    color: #FFF;
}


small {
    text-align: right;
    display: block;
    font-size: 1.2rem;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

}

/* FOOTER */

@media screen and (max-width: 767px) {
	.spbr{
		display: block;
	}
	
    header .inner.w1720 {
        width: 90%;
        align-items: center;
        justify-content: flex-start;
    }

    a.logo {
        width: 3.5rem;
        margin-right: 2rem;
    }

    .h_right {
        width: 27rem;
        margin-left: auto;
    }

    .menu-list {
        height: auto;
        width: 90%;
        margin: auto;
    }

    .sp-hidden {
        display: none !important;
    }

    .pc-hidden {
        display: block;
    }

    a.logo img {
        width: 100%;
        height: auto;
    }

    .openbtn2 {
        width: 4rem;
        height: 4rem;
        margin: 0 0 0 auto;
    }

    .openbtn2 span:nth-of-type(1) {
        top: 2.4rem;
        left: 0;
        right: 0;
        margin: auto;
    }

    .openbtn2 span:nth-of-type(2) {
        left: 0;
        right: 0;
        margin: auto;
        bottom: 2.3rem;
    }

    .openbtn2.active span:nth-of-type(1) {
        top: 0px;
        left: -1.8rem;
    }

    .openbtn2.active span:nth-of-type(2) {
        top: 1.1rem;
        left: -1.9rem;
    }

    .openbtn2 span {
        width: 2rem;
    }

    .menu-content {
        height: 100%;
        padding: 10rem 0 3rem;
        overflow: scroll;
        top: -100%;
    }

    .menu-content ul li a {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .menu-list .list-item,
    .menu-list .list-item:nth-child(4),
    .menu-list .list-item:nth-child(7) {
        margin-bottom: 2rem;
    }

    .menu-list .list-item {
        width: 100%;
    }

    a.line {
        padding: 0 1rem;
        text-align: center;
        line-height: 4rem;
        height: 4rem;
        font-size: 1.6rem;
        width: 23rem;
        margin-right: 2rem;
    }


    a.line::before,
    a.line.white:hover::before {
        left: 1rem;
        width: 1.6rem;
    }



    header .inner {
        padding: 1rem 0;
    }

    header {
        height: auto;
    }

    .swiper-slide img {
        width: 95%;
    }

    

    .ttl {
        font-size: 2rem;
        line-height: 3rem;
    }

    .ttl:before {
        font-size: 1.8rem;
        top: -4rem;
    }

    .contact h2::after {
        height: 2px;
    }

    .ttl:after {
        top: -1.5rem;
    }

    .des {
        font-size: 1.8rem;
        line-height: 4rem;
    }


    .inner.w1720
	{
        width: 100%;
    }

    .inner.w1200,
    .w1200 {
        width: 100%;
    }


    .bnr-line {
        width: 90%;
        margin: auto auto 10rem;
    }

    .bnr-line p::before {
        left: 2rem;
    }

    .bnr-line p::after {
        right: 2rem;
    }

    .bnr-line img {
        width: 13.5rem;
        height: 19.8rem;
        top: auto;
        bottom: 21rem;
        left: 0;
        right: 0;
        margin: auto;
    }

    a.line.white {
        width: 24.9rem;
        margin: auto;
        padding: 1rem 5.5rem;
    }

    a.line.white::before,
    a.line.white:hover::before {
        left: 5rem;
    }

    .bnr-line .bg-b {
        padding: 2rem 0;
    }

    .r-list .list-item:first-child img,
    .r-list .list-item:nth-child(2) img,
    .r-list .list-item:last-child img {
        width: 30%;
        height: auto;
        margin-bottom: 2rem;
    }

    .r-list .list-item {
        padding-top: 2rem;
        margin-bottom: 2rem;
    }

    .r-list .list-item h4 {
        font-size: 2rem;
        line-height: 3rem;
        width: 90%;
        margin: auto auto 2rem;
    }

    .r-list .list-item p {
        width: 90%;
    }

    .r-list .list-item:last-child {
        margin-bottom: 0;
    }

    .contact .bg {
        height: 260rem;
    }

    .form {
        width: 90%;
        margin: auto;
        padding: 2rem 0;
    }

    .contact h2 {
        padding-bottom: 2rem;
        margin-bottom: 5rem;
    }

    .contact .catch {
        width: 90%;
        font-size: 2rem;
        margin: auto auto 3rem;
        line-height: 4rem;
    }

    .contact {
        padding-top: 9.8rem;
		padding-bottom: 5rem;
    }

    .contact__inner td {
        flex-wrap: wrap;
    }

    .contact__inner td br{
        display: none;
    }


    label[for],
    input[type="text"],
    textarea {
        width: 90%;
        margin: auto auto 2rem;
    }

    .privacy--box {
        width: 90%;
        margin: auto auto 2rem;
    }

    .contact__inner {
        margin-bottom: 3rem;
    }

    label.mailbtn {
        width: 80%;
        height: 6rem;
        line-height: 6rem;
    }



    .contact__inner th {
        margin: auto auto 2rem;
        width: 90%;
    }

    footer {
        padding: 5rem 0 2rem;
    }


    small {
        width: 95%;
        margin: auto;
        text-align: center;
    }


	/* THANKS */
	.thanks {
		margin-bottom: 0;
		padding: 12rem 2rem 12rem 2rem;
	}
	
	.thanks .ttl {
	font-size: 2.2rem;
	}
	
	.thanks .des {
		font-size: 1.6rem;
		margin-bottom: 5.1rem;
	}
	
	.btn-thanks {
	  padding: 1.4rem 2.8rem;
	  font-size: 1.6rem;
	}
	
    .des strong,
    .bnr-line .bg-w strong {
        padding: 0 1rem;
        font-size: 1.5rem;
		margin-bottom: 1.6rem;
    }

    .flexwrap,
    .r-list,
    .contact__inner tr,
    .bookinfo-list {
        flex-direction: column;
    }

    .bnr-line p {
        width: 100%;
    }

}