@charset "utf-8";

/*メディアクエリー
スマホ @media (max-width: 768px)
タブレットのみ @media (min-width:768px) and (max-width:1000px)
タブレット・PC @media (min-width:768px)
PC大 @media (min-width:1200px) 
※上記以外のブレイクポイントは、例外的に設定。その場合はコメントアウトを記載すること。
*/


.openbtn span {background-color: #000;}
.contents { margin-bottom:80px; }
@media screen and ( min-width:768px) {
    .contents { margin-bottom:120px; }
}

@media (min-width: 767px) {
    .h1_wrap .head-subtext {
      margin-bottom: 100px;
      margin-bottom: 80px;
    }
}

/*背景によって、ヘッダーのロゴ、ハンバーガーの色を変更*/
.logo_white { display:none; }

.outline dd { line-height: 48px; }
.Link{text-decoration: underline;}
.Link a {color: #000;}
.Link:hover{text-decoration: none;}
.link_img {width: 24px; padding-top:5px;}
.TEL_num {color: #000;}
.outline iframe{ width:95%; height: 200px; margin-top:20px; }
@media screen and ( min-width:768px) {.outline iframe{ width: 100%; height: 240px; margin-top: 30px; }}
.last {border-bottom: 1px solid #CCCCCC;}


/*フッタイメージ*/
.img_wrap {margin-bottom: -31px;}
.img_high img { width: 100%; }
.img_low { display: flex; }
.img_low img{ width: 50%; }

@media screen and ( min-width:768px) {
    .img_wrap { display: flex; justify-content: space-between; width: 100%; }
    /* .img_low img{ width: 100%; } */
}


/*コンテンツ*/
.contents .content_wrap li {display: flex; flex-direction: column; margin: 0 0 60px 0 ;}
.contents .content_wrap .text_wrap {display: contents;}
.contents .content_wrap .text_wrap .content_title {order: 1; margin: 0 0 16px 0;}
.contents .content_wrap .text_wrap .content_title h2.english {width: 100%;display: inline-block; margin: 0 0 0 0; /*text-align: center; */font-size: 40px; font-weight: 400;font-style: normal;font-family: "Cormorant Garamond", serif;}
.contents .content_wrap .text_wrap .content_title span { width: 100%;/*text-align: center; */display: inline-block; font-size: 18px; line-height: 25px; letter-spacing: 0.1em;font-weight: normal;font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
.contents .content_wrap .text_wrap .content_text {order: 2;}
.contents .content_wrap .text_wrap p {width: 100%;display: inline-block;font-size: 16px;letter-spacing: 0.1em;font-weight: normal;}
.contents .content_wrap .text_wrap .button_wrap {order: 4;}
.contents .content_wrap .img_wrap {order: 3; margin: 16px 0;}

@media screen and ( min-width:768px) {
    .contents {max-width: 960px;}
    .contents .content_wrap li {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin: 0 0 120px 0 ;}
    .contents .content_wrap .text_wrap {width: 40%; display: inline;}
    .contents .content_wrap .text_wrap .content_title {margin: 0 0 32px 0;}
    .contents .content_wrap .text_wrap .content_title h2.english {font-size: 50px;margin: 0 0 16px 0}
    .contents .content_wrap .img_wrap {width: 590px; margin: 0;}

    .contents .content_wrap li:nth-child(odd){flex-direction: row;}
    .contents .content_wrap li:nth-child(odd) .img_wrap{margin: 0 0 0 40px;}

    .contents .content_wrap li:nth-child(even){flex-direction: row-reverse;}
    .contents .content_wrap li:nth-child(even) .img_wrap{margin: 0 40px 0 0;}
}


/*ボタン*/
a:link {text-decoration: none;}
.button_wrap {width: 200px; padding: 0 0 0 0;}
.button_wrap .button {width: 200px; height: 50px; display: flex; align-items: center; background: #000000; color: #ffffff; line-height: 45px;/*float: left; */text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;position: relative;}
.button_wrap .button.link.inline_sp {width: 212px; /*position: relative;*/display: none;}
.button_wrap .button span {/*width: 95%;text-align: left;font-size: 16px; */font-family: "Cormorant Garamond", serif; font-weight: 400;font-style: normal; /*margin-left: 0%;display: inline-block;*/padding: 0 14%;}
.button_wrap .button .circle {position: relative; width: 27px; height: 27px; border-radius: 50%; overflow: hidden; /*display: flex; lign-items: center; justify-content: center; */background: #fff; color: #000; /*float: right; */position: absolute; right: 20px;}
.button_wrap .button .circle .arrow {position: absolute; font-size: 13px; animation: none; transition: transform 0.3s ease; color: #000; left: 2px; top: -6.5pt;}

.button_wrap .button:hover {box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}
.button_wrap .button:hover .circle .arrow {animation: slideArrow 0.7s linear infinite;}

@media screen and ( min-width:768px) {
    .button_wrap {padding: 56px 0 0 0;}
}

.head-subtext { color:#000; }


.img_wrap.hover:hover {box-shadow: 0 12px 20px rgba(30, 125, 251, 0.4), 0 6px 10px rgba(30, 125, 251, 0.2);}