@charset "utf-8";
/*
Theme Name: ※※_TITLE_※※
Version: 1.0
*/

/* *********************************
000:RESET
001:BASIC
002:HEADER
003:MAIN
004:FOOTER
005:
006:
007:
008:
100:RESPONSIVE
200:DRAWER
888:EXAMPLE
999:CLEARFIX
*********************************** */
/* *********************************
/* 000:RESET
*********************************** */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video,hr{
margin:0;padding:0;border:0;font-style:normal;font-weight:500;font-size:100%;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section{display:block;}
html{overflow-y:scroll;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
input, textarea{margin:0;padding:0;}
ul{list-style:none;}
table{border-collapse:collapse; border-spacing:0;}
caption, th{text-align:left;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
input[type="button"],input[type="submit"] {-webkit-appearance: none;}
pre{overflow:auto;white-space:pre-wrap;word-wrap:break-word;}
a {text-decoration: none;}
/**********************************
/* 001:BASIC
************************************/
.rsp{width: 100%; height: auto;}
body{background: #101010 url("../img/background.png");}
p,a,h2,h3,dt,dd,td{font-family:"游ゴシック Medium";}
@media screen and (min-width:768px){
	
}
/**********************************
/* 002:HEADER
************************************/
.header {
    position: fixed; 
    top: 0;          
    left: 0;         
    width: 100%;
    z-index: 999;    
    background-color:  rgba(0, 0, 0, 0.9);
}

.header_inner{
	width:90%;
	max-width:1350px;
	margin:0 auto;
	padding:15px 0;
	position: relative;
}

.header_box {
    display: flex;
    height: 100%;
    justify-content: space-between;
    position: relative;
}

.header_box p{
	display:none;
}

.header_box h1{
	width:60%;
	max-width: 170px;
	margin: 0 auto;
}

h1 a:hover img {
	opacity: 0.7; 
}

#menu-btn-check {
    display: none;
}

.hamburger-menu{
	position:fixed;
	right: calc((90vw - min(1350px, 90vw)) / 2 + 15px);
    z-index: 1000;
}

.menu-btn {
    position: relative;
    display: flex;
    height: 30px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 35px;
    background-color: #ffffff;
    position: absolute;
}

.menu-btn span:before {
    bottom: 11px;
}
.menu-btn span:after {
    top: 11px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}


.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(2px); /* 背景をぼかす */
    z-index: 70; /* メニューコンテンツ(z-index: 80)よりは下、通常のコンテンツよりは上 */
    opacity: 0; /* 初期状態では非表示 */
    visibility: hidden; /* 初期状態では非表示 */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* アニメーション */
}

#menu-btn-check:checked ~ .menu-overlay {
    opacity: 1; 
    visibility: visible;
}


.menu-content {
    width: 90%;
    max-width: 330px;
	height: 100vh;
    position: fixed;
    top: 0;
	right: -330px;
    left: auto;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: rgba(0, 0, 0, 0.9);
    transition: all 0.5s;
}

.menu-content ul {
    padding: 80px 10px 0;
	text-align: center;
}
.menu-content ul li {
    list-style: none;
}
.menu-content ul li a {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color:#ffffff;
    text-decoration: none;
    padding: 16px;
    position: relative;
}


.menu-content ul li a:hover {
    text-decoration: underline;
}

#menu-btn-check:checked ~ .menu-content {
    right: 0;/*メニューを画面内へ*/
}

.header_box .sns{
    width: 90%; /* 親要素 (ham-nav-smp) の幅に対する90% */
    max-width: 1350px; /* 必要であれば最大幅を維持 */
    margin: 30px auto 0; /* 上にマージンを設け、左右中央に配置 */
    padding: 0; /* 不要なパディングをリセット */
}

.header_box .sns ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* アイコンを中央に配置 */
    align-items: center; /* 垂直方向の中央揃え */
}

.header_box .sns ul li {
    margin: 0 10px;
    width: 15%; /* 親要素の幅に対する15% */
    max-width:30px; /* 個々のアイコンの最大幅 */
}

.header_box .sns ul li a{
	padding:0;
}

.header_box .sns ul li a:hover img {
    opacity: 0.7;
}

.header_box .logo{
	width: 40%;
    text-align: center;
    margin: 30px auto;
	display: block;
}


.header_box .logo a:hover img{
    opacity: 0.7;
}


/**********************************
/* 003:MAIN
************************************/






/**********************************
/* 004:FOOTER
************************************/

.footer{
	width:90%;
	max-width:1350px;
	margin:0 auto;
	padding:20px 0 0;
	text-align: center;
}

.footer-item {
 	margin-bottom: 15px; 
}


.footer-item img {
	max-width: 100%; 
	height: auto;
}

.footer-item.info {
 	text-align: left; 
	border: 2px solid #000;
}

.info_text.box01,.info_text.box02{
	border-bottom: 2px solid #000; 
	padding:10px 5px;
}

.info_text.box03{
	padding:10px 5px;
}

.footer-item.logo {
	display: none;
}


.box01 p:nth-child(1) { 
	font-weight: 600;
}

.box01 p:nth-child(2) {
	font-weight: 600;
 	font-size: 20px; 
}

.box01 p:nth-child(3) { 
 	font-size: 13px; 
}

.box02 p:nth-child(1){
	font-weight: 600;
}

.box02 p:nth-child(2){
	font-size: 14px;
}

.box03 p:nth-child(1){
	font-size: 24px;
}

.box03 p:nth-child(2){
	font-size: 13px;
}

.footer-bottom-bg {
	background-color: #000;
	width: 100%;
	padding:20px 0 40px;
}	

.footer_logo{
	width: 90%;
    max-width: 1350px;
    margin: 0 auto 20px;
	text-align: center;
}

.footer_logo img{
	width:40%;
	max-width:135px;
}

.footer_logo a:hover img {
	opacity: 0.7;
}

.sns {
	width: 90%;
	max-width: 1350px;
    margin: 0 auto;
}

.sns ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sns ul li {
	margin: 0 10px;
	width: 15%;
	max-width:30px;
}

.sns ul::after { 
	content: "";
	display: table;
	clear: both;
}

.sns ul li a:hover img {
	opacity: 0.7;
}

.copyright p{
	color:#fff;
	font-size:10px;
	text-align: center;
	margin-top:10px;
}





/**********************************
/* 100:RESPONSIVE
************************************/
@media screen and (min-width:700px){
/*header*/
.ham-icon::before {
        top: -15px; /* 間隔を広げる */
    }
    .ham-icon::after {
        top: 15px; /* 間隔を広げる */
    }

    /* 700px以上でもハンバーガーメニューのボタンは表示 */
    .ham-wrapper {
        width: 50px; /* ボタンの幅を調整 */
        height: 40px; /* ボタンの高さを調整 */
    }
    .ham-icon {
        top: 50%;
        transform: translateY(-50%);
    }
    .ham-icon,
    .ham-icon::before,
    .ham-icon::after {
        width: 50px; /* 線の幅を調整 */
    }
	

	
/*main*/


/*footer*/	
.footer-item.photo {
	float: left; 
	width: 45%; 
	margin-right: 2%; 
}
	
.footer-item.photo img {
	width: 384px;
	height: 384px;
	object-fit: cover;
}

.footer-item.info {
	float: left; 
	width: 53%; 
}
	
.info_text.box01, .info_text.box02, .info_text.box03 {
	padding: 24px 7px;
}

.footer-container::after {
  content: "";
  display: table;
  clear: both;
}
	
.footer_logo img{
	width:20%;
}
	
}


@media screen and (min-width:1024px){
/*header*/
.header_inner {
	padding: 30px 0;
	height: 160px;
}


.header_box p {
	display:block;
	width: 20%;
}

.header_box h1 { 
	width: 25%; 
	max-width:none; 
	margin: 0 38% 0 10%;
}

.hamburger-menu{
	margin-left: auto;
	right: calc((97vw - min(1350px, 90vw)) / 2 + 15px);
}
	
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    width: 40px;
}

.menu-content ul {
    padding: 100px 10px 0;
}	


	
	
/*main*/
		

	
/*footer*/	
.s03_inner{
  padding-top:65px;
}		
	
.footer{
	padding:55px 0 0;
}	

.footer-container {
  display: flex;
  justify-content: center; 
  align-items: flex-start;
}	
	
.footer-item{
	margin-bottom: 0;
}
	
.footer-item.photo,.footer-item.logo {
	margin-bottom: 0;
}

	
.footer-item.photo {
	width: 33%;
	margin-right:0;
}

.footer-item.photo img {
	height: 360px;
}


.footer-item.logo {
	display: block;
	text-align: center; 
	background: #000;
    padding: 60px 20px;
	width:33%;
	margin: 0 1%;
}
	
.footer-item.logo img{
	width:70%;
}
	
.footer-item.logo a:hover img {
	opacity: 0.7;
}

.footer-item.info {
	width:33%;
	max-width:384px;
	height:auto;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}
	
.info_text.box01,.info_text.box02,.info_text.box03{
	padding:16px 7px;
}

.box01 p:nth-child(1) { 
	font-size:16px;
}

.box01 p:nth-child(2) {
 	font-size: 24px; 
}

.box02 p:nth-child(1){
	font-size:16px;
}

.box03 p:nth-child(1){
	font-size: 28px;
}


	
.footer-bottom-bg {
	padding-top:30px;
}	
	
.footer_logo{
	display:none;
}
	
.sns ul li {
	margin: 0 10px;
	max-width:40px;
}	
	
.copyright p{
	font-size:13px;
	margin-top:15px;
}	
}

@media screen and (min-width:1300px){
/*footer*/
.footer-item.photo {
	width: auto;
	margin-right:0;
}

.footer-item.logo {
	margin: 0 5%;
}
	
	
	
	
	
}