@import url('https://fonts.googleapis.com/css2?family=Sunshiney&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');

#main_menu ul li a, h2, h3, h4 {
    font-family: 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_en, .date, a[href^="tel:"], a[href^="mailto:"], .cms_title p {
    font-family: 'Outfit', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body {
    line-height: 1.9;
    font-family: 'Outfit', 'Kosugi Maru', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    overflow: hidden;
}
.font_1up{
    font-size: -webkit-calc(1rem + 1px);
    font-size: calc(1rem + 1px);
}

/* ======================================================================================
　　color
======================================================================================== */
.linkStyle{color: #160a0a;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

.bg_color1 {
    background-color: #4690a1;
}
.txt_color1 {
    color: #302e44;
}
.hvr_bg_color1:hover {
    background-color: #e2806f;
}

.button:hover::after {
    box-shadow: inset 0 0 0 15em rgb(70 144 161);
}
header .button:hover::after {
    box-shadow: inset 0 0 0 15em #e0806f;
}
.fat-nav ul {
    background-color: #f7f7f7;
}
.link_a {
    text-decoration: underline;
    color: #cbae86;
}


/* ======================================================================================
　　all
======================================================================================== */
/* ---------- header ---------- */
#main_menu ul li a::before {
    background-color: #E7836F;
}
header.bg_color4 {
    background-color: #302e44;
    border-right: 1px solid #fff;
}
header .tel_bt a[href^="tel:"] {
    color: #ffffff;
    border-color: #4690a1;
}
header .head_banner .fa-envelope:before {
    content: "\f075";
}
#main_menu ul li a{
    color: #ffffff;
}
.main_box .more a{
    background-color: #e2806f;
}

/* ---------- footer ---------- */
footer {
    padding: 100px 10%;
    color: #fff;
    background-color: #302e44;
}
#footer_menu a, #copyright a, #page-top a, #page-top span{
    color: #fff;
}
footer {
    padding: 100px 4%;
}
#map .ggmap, #map2 .ggmap {
    padding-bottom: 386px;
}


/* ======================================================================================
　　top
======================================================================================== */

/* ---------- main_img ---------- */
#main_img {
    padding-top: 59.6%;
    min-height: inherit;
    background-image: url(../Dup/img/main_img.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.main_txt {
    width: 45%;
    max-width: 680px;
    filter: drop-shadow(-1px 0px 5px rgba(0,0,0,0.4));
    top: 47%;
    left: 49%;
}
.main_txt img {
    max-height: 100%!important;
    min-height: 100%!important;
}
.main_txt img{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.main_txt.start img{transform: translateY(0);opacity: 1;}

/* ---------- intro ---------- */
#contents1 .con1_img_box2{
    width: 100%;
}
#contents1 .intro_img p {
    margin-bottom: 24px;
    font-size: 30px;
}
#contents1 .intro_img {
    width: 100%;
    margin: 55px auto 0;
    text-align: center;
    background-color: #f7f7f7;
    padding: 30px;
    border-radius: 10px;
    box-sizing: border-box;
}
#contents1 .intro_img img{
    max-width: 900px;
}

.check {
    background: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}
.check li {
    background: url(Dup/img/check.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
    background-size: 26px;
    padding: 5px 5px 5px 34px;
    /* font-size: 16px; */
}
.top_bnr{
    max-width: 410px;
    margin: 20px auto 0;
}
.top_bnr .hover_img{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.top_bnr a:hover img:not(.hover_img) {
    opacity: 0;
}
.top_bnr a:hover .hover_img {
    opacity: 1;
}


/* ======================================================================================
　　under
======================================================================================== */
#page8 .left, #page8 .right {
    padding: 40px 27px 30px;
    background-color: #f7f7f7;
    margin: 1%;
    width: 48%!important;
    box-sizing: border-box;
}
#page8 .cate_title {
    padding: 0;
    margin: 0;
    font-size: 19px;
    margin-bottom: 16px;
}
#page8 .con_box1 a {
    display: block;
    max-width: 330px;
    margin: 0 auto 27px;
    transition: opacity .6s;
}
#page8 .con_box2 a{
    display: block;
    max-width: 450px;
    margin: 0 auto;
    transition: opacity .6s;
}
#page8 .click_bt {
    cursor: pointer;
    padding: 10px 18px;
    background-color: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
    border-radius: 5px;
    text-align: center;
}
#page8 .txt_box{
     display: none
}

/* ---------- cms2 ---------- */
#cms_3-f .cate_txt1 {
    padding: 20px;
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 10px;
}
#cms_3-f .cate_list li.active a {
    background-color: #E0806F;
    color: #fff;
}

/* ---------- cms3 ---------- */
#top_cms .box:nth-of-type(3) .more {
    margin-top: 81px;
}

/* ---------- cms4 ---------- */
/* link_type2 */
.link_type2 .cate_box a {
    color: #fff;
    padding: 65px 20px;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(153 153 153 / 40%);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background-color: rgb(227 227 221 / 78%);
    transition: 0.5s;
    z-index: 3;
    width: calc(100% - 23px);
    height: calc(100% - 23px);
    border: 2px solid #fff;
    opacity: 0;
}
.link_type2 .cate_box a:hover:after {
    /* top: 0; */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
    letter-spacing: 3px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .8s;
    z-index: 4;
    color: #302e44;
    font-size: 16px;
    font-weight: bold;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}
.link_type2 h3 {
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #6a6a6a;
    padding: 50px 0;
}
.link_type2 .cate_box a:hover h3 {
    opacity: 0;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.link_type2 h3 {
    padding: 30px 0;
}
}
#cms_6-a .img_box figure{width: 48%!important;}





/* ======================================================================================
　　window size
======================================================================================== */

/* ---------- iPad Pro12.9（1024px） ---------- */
@media screen and (max-width: 1400px){
#attach {
    background-attachment: scroll;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
header.bg_color4{
    padding: 18px 0;
}
.hamburger {
    top: 20px;
}
.main_txt {
    width: 48%;
}
#contents1 {
    padding-top: 30px;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
header .head_banner {
    width: 100%;
}
header .head_banner a {
    border-radius: 0;
}
header.bg_color4 {
    padding: 16px 0;
}
.hamburger {
    top: 11px;
}
#main_img {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 50% 0;
    padding-top: 134%;
    background-image: url(../Dup/img/main_img_sp.jpg);
}
.main_txt {
    width: 77%;
}
#contents1 .intro_img p {
    font-size: 22px;
}
#contents1 .intro_img img {
    width: 90%;
    margin: 0 auto 42px;
}
#contents2 {
    padding: 75px 10% 150px;
}
.check li {
    background-size: 21px;
    padding: 2px 3px 2px 30px;
    font-size: 14px;
}
#page8 .left, #page8 .right {
    padding: 30px 27px 30px;
    width: 100%!important;
}
#page8 .cate_title {
    font-size: 17px;
}
}



/* fix_bnr */
#fix_bnr {
    bottom: 4px;
    right: 8px;
    z-index: 10;
    width: 17%;
    max-width: 300px;
    transition: 0.5s;
}
#fix_bnr.scroll {
    width: 15%;
    max-width: 220px;
}
#fix_bnr.close {
    opacity: 0;
    z-index: -1;
}
#fix_bnr .hover_img {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#fix_bnr a:hover img:not(.hover_img) {
    opacity: 0;
}
#fix_bnr a:hover .hover_img {
    opacity: 1;
}
@media screen and (max-width: 768px){
#fix_bnr {
    width: 23%!important;
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 41%!important;
    right: 2px;
    bottom: 48px;
}
#fix_bnr.scroll {
    width: 34%!important;
}
}


/* ======================================================================================
　　公開後修正
======================================================================================== */
/* 2022.08.01 */
.txt7 {
    padding-bottom: 15px;
    padding-top: 10px;
    display: block;
}
.txt5 {
    position: relative;
    padding-right: 99px;
    padding-bottom: 15px;
    padding-top: 10px;
    max-width: 77%;
    /* box-sizing: border-box; */
}
.txt5_item {
    width: 85px;
    max-width: 100px;
    right: 0;
    top: -31px;
}
@media screen and (max-width: 768px){
.txt5{
    padding-right: 78px;
}
.txt5_item {
    width: 66px;
    right: 0;
    top: -26px;
}
}

/* お問い合わせフォーム */
#page8 .radio-input {
    display: none;
}
#page8 .radio-input + label {
    padding-left: 23px;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}
#page8 .radio-input + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #9e9e9e;
    border-radius: 50%;
}
#page8 .radio-input:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 11px;
    height: 11px;
    background: #4690a1;
    border-radius: 50%;
}
#form_box dl input, #form_box dl textarea {
    background-color: #f3f3f3;
}
#page8 .mail input {
    cursor: pointer;
    border-color: #4690a1;
}
#page8 textarea.form_content::-webkit-input-placeholder{
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	opacity: 0.8;
}

/* 2022.08.18 */
.news_cms_box{
    padding: 50px 10%;
}

/* 2022.08.24 */
@media screen and (max-width: 768px){
header .head_banner {
    width: 300px;
}
}

/* 2022.09.13 */
.page4 #cate0 .cate_title{
	position: relative;
}
.page4 #cate0 .cate_title::before {
    content: '';
    display: inline-block;
    max-width: 210px;
    width: 14vw;
    height: 14vh;
    background-image: url(../dup/img/staff_logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -164%;
    top: -8px;
}
@media screen and (max-width: 768px){
.page4 .cate_title{
    display: inline-block;
}
.page4 #cate0 .cate_title::before {
    min-width: 119px;
    width: 20vw;
    height: 8vh;
}
}
@media screen and (max-width: 667px){
.page4 #cate0 .cate_title::before {
    width: 32vw;
    height: 9vh;
    min-width: 100%;
    max-width: 127px;
    top: -5px;
}
}

/* 2024.03.28 */
.txt5{padding-right: 0;max-width: 81%;}
.txt5_item {
    width: 10vw;
    max-width: 159px;
    left: 219px;
    top: -18px;
}
@media screen and (max-width: 1050px){
footer {
    padding: 100px 4%;
    color: #fff;
    background-color: #302e44;
}
#map .ggmap, #map2 .ggmap {
    padding-bottom: 252px;
}
}
@media screen and (max-width: 768px){
.txt5_item {
    width: 99px;
    right: -111px;
    left: auto;
    top: -6px;
}
}
@media screen and (max-width: 667px){
#map .ggmap, #map2 .ggmap {
    padding-bottom: 311px;
}
header #logo {
    max-width: 223px;
}
.main_box {
    padding-top: 58px;
}
}