/* **************************************************

  		　　　　　　変数設定

************************************************** */
:root {
	--header-height:4rem;
    --base-color:#01418E;
    --hover-color:#FBAA1E;
}

/* **************************************************

  		　　　　   レイアウト

************************************************** */
html {
	height:100%;
    background:#000;
}
body {
}
.container {
    width:100%;
}
.outer {
    width:1280px;
    max-width:100%;
    margin:0 auto;
    position:relative;
}
.inner {
    width:90%;
    margin:0 auto;
    position:relative;
}

/* **************************************************

        ブロックテーマリセット

************************************************** */
.wp-site-blocks {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100vh;
}
.entry-content {
  width:100%;
  max-width:100%;
}

main {
    margin:0;
    padding:0;
}

/* **************************************************

  		　　　　　　初期設定

************************************************** */
* {
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	font-weight:200;
	color:#2d2d2d;
	word-wrap:break-word;
	overflow-wrap:break-word;
	box-sizing:border-box;
	margin:0;
	padding:0;
    font-feature-settings: "palt";
    letter-spacing:0.05rem;
}
ul {
	list-style-type:none;
}
ul li a {
    text-decoration:none;
}
img {
    width:100%;
	max-width:100%;
	height:auto;
	vertical-align:bottom;
}
a img {
	border:none;
}
a img:hover {
    opacity:0.7;
}

a {
    text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
table {
	border-collapse:collapse;
	border:0px;
}
table tr td {
	word-break:break-all;
	padding:0px;
}
strong,
b {
	font-weight:600;
}
.shadow {
	text-shadow:0 0 5px #000;
}

p {
    display:none;
}
main p {
    display:block;
}

/* **************************************************

  		　　　　　　　ヘッダー

************************************************** */
header {
	width:100%;
	height:var(--header-height);
	/* position:fixed; */
    position:absolute;
	top:0;
	left:0;
	z-index:9999;
	pointer-events:none;
    background:none;
}
#header_inner {
    width:100%;
    max-width:1920px;
	height:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 auto;
    position:relative;
}
body.page-template-page-top #header_inner {
   /*  margin-top:1.5rem; */
}

/* **************************************************

      		　ハンバーガーメニュー

************************************************** */
.scroll_off {
	overflow:hidden;
}

/* -----------------------------------------------------

　　　　3本線の設定（クリックされていない状態）

----------------------------------------------------- */
#menu {
	width:2rem;
    height:var(--header-height);
	position:fixed;
	top:0%;
	right:1rem;
	z-index:30;
	display:flex;
	pointer-events:auto;
}
/* 背景でクリック可能に */
.menu_button {
	width:100%;
	height:30%;
	background:none;
	border:0;
	margin:auto;
}
.menu_button span.menu_icon:before,
.menu_button span.menu_icon ,
.menu_button span.menu_icon:after {
	width:2rem;
	height:1px;
	position:absolute;
	content:'';
	display:block; /* width：min(calc(50 / var(--full-width) * 100vw), 50px)； */
	background-color:#fff;
	transition:all .4s;
}
body.page-template-page-top .menu_button span.menu_icon:before,
body.page-template-page-top .menu_button span.menu_icon ,
body.page-template-page-top .menu_button span.menu_icon:after {
    background-color:#fff;
}

/* 真ん中の線 */
.menu_button span.menu_icon {
}
/* 上の線 */
.menu_button span.menu_icon:before {
	bottom:calc(var(--header-height) * 0.33 / 2); /* 14.6vh * 30% ÷ 2 */
    bottom:11px;
}
/* 下の線 */
.menu_button span.menu_icon:after {
	top:calc(var(--header-height) * 0.33 / 2); /* 14.6vh * 30% ÷ 2 */
    top:12px;
}
/* 右側エリア（画面外に隠しておく） */
.menulist {
	width:100%;
    height:100%;
    display:block;
	position:fixed;
	top:0;
	right:-100%;
	z-index:-1;
	background:#C1151B;
	pointer-events:auto;
    /* padding-top:var(--header-height); */
    overflow:hidden;
    padding-top:var(--header-height);
    z-index:10;
    	transition:all 0.2s 0.1s ease-out; /* アニメーション設定 */
}
body.page-template-page-top .menulist {
    /* padding-top:calc(var(--header-height) + 1.5rem); */
}

/* -----------------------------------------------------

	3本線を×に切り替え（クリックされた状態）

----------------------------------------------------- */
.menu_chg#menu {
}
/* メニューオープン時は真ん中の線を透明にする */
.menu_chg .menu_button span.menu_icon ,
body.page-template-page-top .menu_chg .menu_button span.menu_icon {
	background-color:rgba(255, 255, 255, 0);
}
/* 上の線を斜めに */
.menu_chg .menu_button span.menu_icon::before {
	bottom:0;
	background-color:#fff;
	transform:rotate(45deg);
}
/* 下の線を斜めに */
.menu_chg .menu_button span.menu_icon::after {
	top:0;
	background-color:#fff;
	transform:rotate(-45deg);
}

/* 隠していた右側エリアを画面内に戻す */
.menu_open.menulist {
	position:fixed;
	right:0;
    top:0;
	z-index:10;
    height:100%;
}

/* -----------------------------------------------------

	　　　　　      メニューOPEN（右）

----------------------------------------------------- */
/* -----------------------------------------------------
		              メニュー
----------------------------------------------------- */
.menulist_inner {
    justify-content:center;
    display:flex;
    margin:auto;
	width:auto;
    height:90%;
}

body.page-template-page-top .menulist_inner ul {
    margin-right:auto;
}
.menulist_inner ul {
    display:flex;
    flex-flow:column;
    justify-content:space-around;
    align-items: center;
    margin:auto;
    height:100%;
}
.menulist_inner ul li {
    width:auto;
	height:auto;
    display:block;
    text-align:center;
}
.menulist_inner ul li a span.menu_en {
    font-size:1.4rem;
    line-height:1em;
    font-weight:bold;
    display:block;
    text-align:center;
	color:#fff;
}
.menulist_inner ul li a span.menu_ja {
    font-size:0.7rem;
    line-height:1em;
    display:block;
    text-align:center;
    margin-top:0.5em;
    color:#EEBFC1;
}

.menulist_inner ul li#menu_home:before ,
.menulist_inner ul li#menu_company:before ,
.menulist_inner ul li#menu_works:before ,
.menulist_inner ul li#menu_blog:before {
    content:none; 
}

.menulist_inner ul li#menu_blog:after ,
.menulist_inner ul li#menu_recruit:after {
    content:none;
}

body.page-template-page-top #menu_recruit {
    margin-left:0;
    position:relative;
    transform:translate(0%,0%);
    height:auto;
}
body.page-template-page-top #menu_recruit a {
    position:relative;
    display: block;
    width:auto;
    height:auto;
    padding:0;
    background-color:none;
    color: #fff;
    pointer-events:auto;
    letter-spacing:0;
    border-radius:0;
    text-decoration:none;
    margin:0;
    line-height:1rem;
}

/* アイコンのスタイル */
body.page-template-page-top #menu_recruit a::before {
    content:none;
}
body.page-template-page-top #menu_recruit a::after {
    content:none;
}
body.page-template-page-toppage-template-page-top #menu_recruit a:hover {
    background:none;
    text-decoration:underline;
}

/* **************************************************

  		　　　　下層ページ見出し

************************************************** */
#page_bg {
    aspect-ratio: 393 / 171;
    overflow:hidden;
}
/* ラッパー（外側の要素） */
#page_bg_img {
    top:0;
    right:0;
    left:0;
    bottom:0;
    overflow:hidden;
    position:fixed;
    z-index:-1;
    /* background-image:url('../img/class/header_bg.jpg');
    background-repeat:no-repeat;
    background-size:100% auto; */
    background-color:#000;
}
#page_bg_img img {
    width:100%;
    height:calc(171 / 393 * 100vw);
    object-fit: cover
}

/* ドットフィルター */
#page_bg_img::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100dvh;
  /* background-color: rgba(0, 0, 0, 0.1);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px; */
    z-index:10;
}

#page_header {
    margin-top:var(--header-height);
    text-align:center;
	position:relative;
	background:var(--base-color);
    height:5rem;
    vertical-align:middle;
    display:flex;
    overflow:hidden;
}

/* ****************************************************

		 　    　　各ページロゴ

***************************************************** */
body.home #page_logo {
    display:none;
}
#page_logo {
	width:auto;
	height:70%;
    margin:0rem 0 0 0.5rem;
}
#page_logo img {
	width:auto;
	height:100%;
	vertical-align:top;
	pointer-events:auto;
}

/* ****************************************************

		 　    　　各ページタイトル

***************************************************** */
section#page_title {
    background:#000;
    padding:0rem 0 0;
    height:2rem;
}
section#page_title p {
    text-align:left;
    color:#fff;
    margin-right:0rem;
    font-size:1rem;
    line-height:1.4em;
}

/* -----------------------------------------------------
　　　　　　　　　　　　枠のみ吹き出し
----------------------------------------------------- */
h1.frame_baloon {
    position: absolute;
    display: inline-block;
    padding: 0.6rem 1.5rem 0.2rem;
    color: #555;
    background:rgba(0,0,0,0.7);
    border: solid 2px #fff;
    box-sizing: border-box;
    transform: rotate(7deg);
    top:-2.0rem;
    right:0;
    text-align:center;
    line-height:0;
}
h1.frame_baloon::before {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    margin-left: calc((0.5rem - 1px) * -1);
    border: 0.5rem solid transparent;
    border-top:calc(0.5rem + 1px) solid #000;
    z-index:2;
}
h1.frame_baloon::after {
    content: "";
    position: absolute;
    bottom: calc((1rem + 5px) * -1);
    left: 50%;
    margin-left: calc((0.5rem + 1px) * -1);
    border: calc(0.5rem + 2px) solid transparent;
    border-top: calc(0.5rem + 2px) solid #fff;
    z-index: 1;
}
h1.frame_baloon img {
    margin:0;
    padding:0;
    vertical-align:bottom;
    height:1rem;
    width:auto;
    line-height:1em;
}
h1.frame_baloon span {
    color:#fff;
    font-size:0.6rem;
    line-height:2em;
    display:block;
}

/* -----------------------------------------------------
　　　　　　　　　導入文
----------------------------------------------------- */
.intro {
    padding:1rem 0rem 0rem 0;
}
.intro p {
    color:#fff;
}

/* -----------------------------------------------------
　　　　　　　　　中央・左右ボーダー見出し
----------------------------------------------------- */
h2.border_title {
    position:relative;
    text-align:center;
    z-index:1;
}
h2.border_title::after {
    position:absolute;
    content:"";
    display:block;
    color:#fff;
    height:1px;
    width:100%;
    border-top:1px solid #fff;
    opacity:0.4;
    top:50%;
    z-index:-2;
}
h2.border_title span {
    background:#000;
    font-size:1.2rem;
    line-height:1.4em;
    display:inline-block;
    font-weight:bold;
    letter-spacing:0.1rem;
    color:#fff;
    padding:0 1em;
}
section#place h2.border_title::after {
    color:#000;
    border-top:1px solid #707070;
}
section#place span {
    background:#fff;
    color:#000;
}

body.page h2.border_title span {
    font-size:1.2rem;
    letter-spacing:0rem;
}
body.home h2.border_title span {
    font-size:1.6rem;
    letter-spacing:0rem;
}

/* -----------------------------------------------------
　　　　　　　　　　　　下線・赤
----------------------------------------------------- */
.unber {
	background: linear-gradient(transparent 70%, #C1151B 70%);

}

/* **************************************************

  		　        　コンテンツ

************************************************** */
main {
	text-align:left;
    margin:0;
    padding:0;
    position:relative;
 }

article {
    margin:6rem 0;
}


/* **************************************************

  		　        　フッター

************************************************** */
footer {
	margin:0 0 0 0;
}

/* **************************************************
              
                　    SNS

************************************************** */
section#sns {
    padding:2rem 0 0rem;
    background:url('../img/common/footer_bg.jpg') no-repeat bottom #000;
    background-size:100% auto;
    border-top:1px solid #000;
}

.follow_me {
	font-size: 1.2rem;
	font-weight: bold;
	color:#fff;
	position:relative;
	width:12rem;
	height:1.5rem;
	line-height:1.5rem;
	text-align:center;
    margin:0 auto 2rem;
}
.follow_me::before {
	position:absolute;
	content:"";
	top:-0.5rem;
	left: 2rem; /* 左にずらす */
     transform:translate(-50%,-50%);
	transform: rotate(-45deg); /* 左側の棒を回転 */
	transform-origin: bottom; /* 回転の起点を下端に設定 */

	width: 1px; /* 棒の幅 */
	height: 2rem; /* 棒の長さ */
	background-color:#999; /* 棒の色 */
}
.follow_me::after {
	position:absolute;
	content:"";
	top:-0.5rem;
	right:2rem; /* 右にずらす */
	transform: rotate(45deg); /* 右側の棒を回転 */
	transform-origin: bottom; /* 回転の起点を下端に設定 */
	width: 1px; /* 棒の幅 */
	height: 2rem; /* 棒の長さ */
	background-color:#999; /* 棒の色 */
}


section#sns h2 img {
    height:1.5rem;
}

ul.sns_list {
    display:flex;
    justify-content:center;
    margin:1rem 0 0;
    padding-bottom:calc(900/1706*80%);
}
ul.sns_list li {
    border-radius:50%;
    background:#fff;
    width:3rem;
    height:3rem;
    display:flex;
    margin:0 0.5rem;
    justify-content:center;
}
ul.sns_list li a {
    display:flex;
}
ul.sns_list li img.insta {
    width:50%;
    height:auto;
    margin:auto;
}
ul.sns_list li img.youtube {
    width:60%;
    height:auto;
    margin:auto;
}
ul.sns_list li img.tiktok {
    width:80%;
    height:auto;
    margin:auto;
}

/* **************************************************
              
                　　フッターメニュー

************************************************** */
section#footer_menu {
    background:#000;
    border-top:1px solid #000;
    padding-bottom:1rem;
}
section#footer_menu .inner {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:0rem;
}
section#footer_menu .inner ul {
    display:flex;
    align-items:center;
    justify-content: center;
    width:100%;
}

section#footer_menu .inner ul li {
    text-align:center;
    border-left:1px solid #707070;
    padding:0 1rem;
    display:flex;
    align-items:center;
    justify-content: center;
}
section#footer_menu .inner ul li:last-child {
    border-right:1px solid #707070;
}
section#footer_menu .inner ul li a {
    color:#fff;
    font-size:0.7rem;
}




/* **************************************************
              
                　　コピーライト

************************************************** */
section#copyright {
    display:none;
}
section#copyright span {
    color:#fff;
    font-size:0.6rem;
    margin:2rem 0 1rem auto;

}