@charset "utf-8";
/* -----------------------------------------------------------------------------
各ページ共通CSS
------------------------------------------------------------------------------*/
/*レスポンシブ用雛形　使うところにコピペ*/
/*
@media screen and (max-width: 560px) {
    /*　スマホの時ここを読み込む　
}
@media screen and (min-width: 768px) {
    /*　画面サイズが768px以上からはここを読み込む　
}
@media screen and (min-width: 960px) {
    /*　画面サイズが960px以上からここを読み込む　
}
@media screen and (min-width: 1200px) {
    /*　画面サイズが1200px以上からはここを読み込む　
}
*/
/*　フォントサイズの計算式　*/
/*　https://modern-fluid-typography.vercel.appで数値設定して、clamp以下をコピペ
例）font-size: clamp(2.6rem, 1.8vw + 1rem, 3.2rem);
*/
/* -------------------------------------
表示幅、ボディー
--------------------------------------*/
body, html {
	line-height: 1.5;
	letter-spacing: 0.05rem;
	display: block;
	width: auto;
	height: 100%;
}
html {
	font-size: 62.5%;
}
body {
	margin: 0 !important;
	color: #333;
	font-size: 1.6rem;
}
#container {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
	overflow: hidden;
}
@media screen and (min-width: 960px) {
/*画面サイズが960px以上*/
	#container {
		width: 950px;
	}
}
@media screen and (min-width: 1200px) {
/*画面サイズが1200px以上*/
	#container {
		width: 1170px;
	}
}
#contents {
	margin-bottom: 3rem;
	padding-top: 18rem;
	border-bottom: solid 2px #005a9f;
}
@media screen and (min-width: 960px) {
	#contents {
		padding-top: 25rem;
	}
}
/* -------------------------------------
マージン
--------------------------------------*/
.common_margin {
    margin: 0 1.5rem;
}
@media screen and (min-width: 960px) {
    .common_margin {
        margin: 0 10%;
    }
}
.marginR20 {
    margin-right: 2rem;
}
.marginB10 {
	margin-bottom: 1rem;
}
.marginB20 {
	margin-bottom: 2rem;
}
.marginB30 {
	margin-bottom: 3rem;
}
.marginB40 {
	margin-bottom: 4rem;
}
.marginB50 {
	margin-bottom: 5rem;
}
.marginB60 {
	margin-bottom: 6rem;
}
.marginB80 {
	margin-bottom: 8rem;
}
.marginB100 {
	margin-bottom: 10rem;
}
.marginL10 {
    margin-left: 1rem;
}
/* -------------------------------------
パディング
--------------------------------------*/
.padding10 {
    padding: 1rem
}
.paddingT10 {
    padding-top: 1rem
}
h1 {
    
}
h2 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 2rem;
}
h3 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 2rem;
}
/* -------------------------------------
テキスト関係
--------------------------------------*/
/*　改行制御　*/
.newLineControl {
    word-break: keep-all;
    overflow-wrap: break-word;
}
.font12{
	font-size: 1.2rem;
}
.font14 {
	font-size: 1.4rem;
}
.font16 {
	font-size: 1.6rem;
}
.font18 {
	font-size: 1.8rem;
}
.font20 {
	font-size: 2rem;
}
.font22 {
	font-size: 2.2rem;
}
.font28 {
    font-size: 2.8rem;
}
.font32 {
    font-size: 3.2rem;
}
.font34 {
    font-size: 3.4rem;
}
.font36 {
    font-size: 3.6rem;
}
.font50 {
	font-size: 5rem;
}
.font70 {
	font-size: 7rem;
}
/*　フォントを可変サイズにする　*/
.font14-16 {
	font-size: clamp(1.4rem, 0.75vw + 1rem, 1.6rem);
}
.font16-18 {
	font-size: clamp(1.6rem, 1vw + 1rem, 1.8rem);
}
.font16-20 {
	font-size: clamp(1.6rem, 1vw + 1.1rem, 2rem);
}
.font16-22 {
	font-size: clamp(1.6rem, 0.8vw + 1rem, 2.2rem);
}
.font18-26 {
	font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
}
.font18-22 {
	font-size: clamp(1.8rem, 1vw + 1.25rem, 2.2rem);
}
.font20-24 {
	font-size: clamp(1.8rem, 1vw + 1.25rem, 2.4rem);
}
.font22-30 {
	font-size: clamp(2.2rem, 1.8vw + 1rem, 3rem);
}
.font20-26 {
	font-size: clamp(2rem, 2vw + 1rem, 2.6rem);
}
.font24-32 {
	font-size: clamp(2.4rem, 1.8vw + 1rem, 3.2rem);
}
.fontB {
	font-weight: bold;
}
.fontN {
	font-weight: normal;
}
/*　中央揃え　*/
.textCenter {
	text-align: center;
}
/*　右詰め　*/
.textRight {
	text-align: right;
}
/*　均等割り付け　*/
.textJustify {
	text-align: justify;
}
/*　テキスト修飾用　*/
.textOrange {
	color: #f7931e;
}
.textGreen {
	color: #00a73c;
}
.textBlue {
	color: #00a0e9;
}
.textWhite {
	color: #fff;
}
.underlineYellow{
	background: linear-gradient(transparent 50%, #ffe600 0%);
}
.common_List {
    padding-left: 1.6rem;
    text-indent: -1.6rem;
    text-align: justify;
}
.textDecoNone {
    text-decoration: none;
}
/* -------------------------------------
画像関係
--------------------------------------*/
.img_Max100 img {
	max-width: 100%;
	height: auto;
}
.img_W100 img {
	width: 100%
}
/* -------------------------------------
ハンバーガーメニュー
--------------------------------------*/
/*　ハンバーガーメニューに切り替え　*/
@media screen and (max-width: 959px) {
	.gnavi_button_back {
		display: block;
		width: 100%;
		position: relative;
	}
	/*　ハンバーガーメニューのボタン　*/
	.gnavi_menu-btn  {
		position: absolute;
		bottom: -50%;
		right: 0.1rem;
        transform: translateY(-50%);
		display: flex;
		height: 5rem;
		width: 5rem;
		justify-content: center;
		align-items: center;
		z-index: 90;
        border: none;
		background-color: #dd56a5;
	}
	.gnavi_menu-btn span,
	.gnavi_menu-btn span::before,
	.gnavi_menu-btn span::after {
		content: '';
		height: 0.3rem;
		width: 2.5rem;
		border-radius: 0.3rem;
		background-color: #ffffff;
		position: absolute;
	}
	.gnavi_menu-btn p {
		margin-top: 7rem;
		font-size: 1.2rem;
	}
	.gnavi_menu-btn span::before {
		bottom: 0.8rem;
	}
	.gnavi_menu-btn span::after {
		top: 0.8rem;
	}
	/*　ハンバーガーメニューのボタンの動き　*/
	.gnavi_menu-btn.active span {
		background-color: rgba(255, 255, 255, 0);/*　メニューオープン時は真ん中の線を透明にする　*/
	}
	.gnavi_menu-btn.active span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	.gnavi_menu-btn.active span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	.gnavi_menu-item {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*　ボタンをクリックされる前はメニューを画面外へ　*/
		z-index: 80;
		background-color: #dd56a5;
		transition: all 0.5s;/*　アニメーション設定　*/
	}
	.gnavi_menu-item.active  {
		left: 0;/*　ボタンをクリックされたらメニューを画面内へ　*/
	}
	.gnavi_menu-btn.active p {
		color: #ffffff;
	}
	.gnavi_menu-item ul {
		flex-direction: column;
		padding: 7rem 10% 0;
	}
	.gnavi_menu-item ul li {
		padding: 1.5rem 0;
		list-style: none;
	}
	.gnavi_menu-item ul a {
		width: 100%;
		font-size: 2rem;
		box-sizing: border-box;
		color: #ffffff;
		text-decoration: none;
		position: relative;
	}
	.gnavi_menu-item ul li::before,
	.gnavi_menu-item ul li:last-child::after {
		content: '';
	}
}