@charset "utf-8";
/* ===================================================================
     BASE CSS
=================================================================== */
html {
	font-size: 62.5%;
}
body {
	/*-webkit-text-size-adjust: 100%;*/
}
body {
	background: #fbf7f5;
	font-size: 180%;
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ","Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	line-height: 2;
	position: relative;
	letter-spacing: 0em;
    overflow: hidden;
}
a {
	color: #ccc;
	text-decoration: none;
	transition: opacity .1s ease-in-out;
}
a:hover {
	opacity: 0.8;
}
@media screen and (max-width: 767px) {
body {
	font-size: 140%;
}
}


/* -----------------------------------------------------------
	汎用
----------------------------------------------------------- */

.scroll-fade{
	opacity: 0;
	transition: all 3s/*処理にかかる時間*/;
}
.scroll-up{
	opacity: 0;
	transform: translateY(25px)/*スクロールアップする距離*/;
	transition: all 0.5s/*処理にかかる時間*/;
}

.scroll-up.done,
.scroll-fade.done{
	opacity : 1;
	transform : translate(0, 0);
}
.load-fade {
	opacity : 0;
	transition : all 1s/*処理にかかる時間*/;}
.load-up{
	opacity: 0;
	transform: translateY(100px)/*スクロールアップする距離*/;
	transition: all 2s/*処理にかかる時間*/;
}
.load-up2{
	opacity: 0;
	transform: translateY(100px)/*スクロールアップする距離*/;
	transition: all 2s/*処理にかかる時間*/;
	-moz-transition-delay:300ms;
	-webkit-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
}

.load-up.done,
.load-up2.done,
.load-fade.done{
	opacity : 1;
	transform : translate(0, 0);
}
/* ---------------------
	general_table
---------------------- */
.general_table {
	width: 100%;
	text-align:left;
}
.general_table th,
.general_table td {
	border: 12px solid #fff;
	padding: 18px;
}
.general_table th {
	background: #D9D9D9;
	font-weight: normal;
}
.general_table td {
	background: #f2f2f2;
}
@media screen and (max-width: 767px) {
.general_table th,
.general_table td {
	border: 4px solid #fff;
	padding: 4px 10px;
}
}


.common_inner{
	max-width:1200px;
	margin:0 auto;
}
@media screen and (max-width: 1280px) {
.common_inner{
	width:94%;
}
}
@media screen and (max-width: 767px) {
.common_inner{
	width:92%;
}
}




main,footer{
    max-width: 1400px;
    margin: 0 auto;
}
@media screen and (max-width:1200px) {
    
}
@media screen and (max-width:960px) {

}
@media screen and (max-width: 767px) {

}



/* -----------------------------------------------------------
	footer
----------------------------------------------------------- */
footer {
    color:#fff;
    text-align: center;
    padding-bottom: 20px;
    width: 90%;
}
footer .contact{
    line-height: 1.4em;
    padding: 40px 0 20px 0;
    font-weight: 400;
    font-size: 16px;
}
footer .contact .title{
    background: #fff;
    color: #cd3248;
    width: 90px;
    font-weight: 600;
    margin: 0 auto 20px;
}
footer .copy {
    font-size: 14px;
    }
footer a {
    color:#fff;
    }

footer .box {
    margin-bottom:30px;
}
footer .box span.sub_title{
    display:block;
    font-weight: bold;
     margin-bottom: 6px;
}
footer .box span.tel_pc{
     display: inline-block;
}
footer .box span.tel_smp{
    display:none;
}





@media screen and (max-width: 1200px) {
footer{

    }
footer .copy {
    
    }
}
@media screen and (max-width: 960px) {
footer {
   
    }
footer .copy {
    
    }
}
@media screen and (max-width: 767px) {
footer .box span.tel_pc{
    display:none;
}
footer .box span.tel_smp{
    display:inline-block;
}
footer .contact {
	line-height: 1.2;
    padding: 40px 0 0 0;
    font-size: 12px;
}
footer .box span.sub_title{
    letter-spacing: ;
}
footer .copy {
	line-height: 1.2;
    font-size: 12px;
    }
}
@media screen and (max-width: 480px) {
footer {
 
    
}

}


/* -----------------------------------------------------------	
fadein	
----------------------------------------------------------- */	
.fadein{	
opacity: 0;	
will-change: opacity,translate, filter ;	
}






.lang-switch {
    display: flex;
    gap: 8px;
    width: 90%;
    max-width: 920px;
    justify-content: flex-end;
    margin: 0 auto;
    padding: 30px 0 30px 0;
}

.lang-btn a{
    padding: 4px 19px;
    background: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #888; /* デフォルトはグレー */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s, color 0.3s;
}

.lang-btn.active {
    color: #993333; /* アクティブ時の赤系カラー */
    padding: 4px 19px;
    background: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s, color 0.3s;
}


.lang-btn a:hover {
    background: #fff;   /* 背景をグレー */
    color: #993333;        /* 文字を白に反転 */
    opacity: 1;
}
@media screen and (max-width: 767px) {
.lang-btn a{
    padding: 6px 26px;
}
.lang-btn.active {
    padding: 6px 26px;
}
}