@charset "UTF-8";

/* # =================================================================
   # フォント設定
   # ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');



/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4;
  min-width: 320px;
  scroll-behavior: smooth;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}


svg {
vertical-align:bottom;
margin:0;
}



/* # =================================================================
   # 共通カラー / font-size
   # ================================================================= */

:root {
    --color-white: #ffffff;
    --color-gray1: #333333;
    --color-gray2: #91999E;
	--color-gray3: #D9D9D9;
	--color-gray4: #f7f7f7;
	--color-gray5: #E6E6E6;
	--color-red: #B81C22;
	--color-blue1: #006BB4;
	--color-blue2: #EAF6FD;
	--color-blue3: #2CA6E0;
	--color-yellow: #FFF000;
	--color-yellow2: #FFFBC7;
	--color-orange: #E95710;
}



/* # =================================================================
   # 共通設定
   # ================================================================= */
   
   
body {
	font-family: 'Inter','Noto Sans JP', sans-serif;
	font-display: swap;
	font-size: 14px;
	color:var(--color-gray1);
	letter-spacing: 1px;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility
	-webkit-overflow-scrolling: touch;
}

img, svg {
  vertical-align: middle
}

ol, ul {
  list-style: none
}

body>img {
  display: block;
  height: 0!important;
  font-size: 0
}


main {
	text-align:center;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}


/*-----セクション幅----*/
.sec-content{width:100%;margin-left:auto;margin-right:auto;vertical-align: middle;}
.sec-content1{width:85%;margin-left:auto;margin-right:auto;vertical-align: middle;max-width:1200px;}


.page-block-top{padding-top:100px;}
.page-block-btm{padding-bottom:100px;}

.space-block-top30{margin-top:30px;}
.space-block-btm30{margin-bottom:30px;}

.space-block-top50{margin-top:50px;}
.space-block-btm50{margin-bottom:50px;}

.space-block-top80{margin-top:80px;}
.space-block-btm80{margin-bottom:80px;}


.copy-l{text-align:left;}
.copy-r{text-align:right;}
.copy-c{text-align:center;}

.line200{line-height:200%;}
.line150{line-height:150%;}


/*-----改行----*/
.br-pc{display:block;}
.br-mbpc{display:block;}
.br-sp{display:none;}
.br-mb{display:none;}


/*-----ページ内リンク----*/
a.anchor{
    display: block;
    padding-top: 30px;
    margin-top: -30px;
}

/*-----------スマホ設定-----------------*/

@media screen and (max-width:1200px){
	main {border:none;}
}

@media screen and (max-width:768px){
	.sec-content1{width:90%;}
	.br-pc{display:none;}
	.br-sp{display:block;}
	.page-block-top{padding-top:80px;}
	.page-block-btm{padding-bottom:80px;}
}

@media screen and (max-width:599px){
	.br-mb{display:block;}
	.br-mbpc{display:none;}
}


/* # =================================================================
   # header
   # ================================================================= */

header{
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.header-pc{display:block; z-index:100; width:100%; }

.header-sp{display:none;}


/*-----------スマホ設定-----------------*/
@media screen and (max-width:769px){
.header-pc{display:none;}
.header-sp{display:block;position: absolute;}
}


.head-menu{
    display:flex;
    align-items: center;
	justify-content: center;
}

.head-menu-logo{width:200px;text-align:center;padding-top:20px;height:70px;mix-blend-mode: difference;}
.head-menu-logo img{width:150px;}

.head-menu-logo-sub{width:300px;text-align:center;padding-top:15px;height:70px;}
.head-menu-logo-sub img{height:50px;}

/*-----------index-----------------*/
.head-nav {
    flex-grow:1;
	text-align:right;
}

.head-nav ul {
    padding: 0px;
    list-style-type: none;
	padding-right:50px;
}

.head-nav li {
	display: inline;
	margin-left:15px;
	font-size: clamp(10px, 1.2vw, 14px);
	font-weight:700;
}

.head-nav li a{
	color:var(--color-white);
	mix-blend-mode: difference;
	text-decoration:none;
	position: relative;
	display: inline-block;
	font-weight:700;
	transition: all .3s;
	opacity: 1;
}

.head-nav li a:hover{
	opacity: 0.6;
}

/*-----------sub page-----------------*/
.head-nav-sub {
    flex-grow:1;
	text-align:right;
}

.head-nav-sub ul {
    padding: 0px;
    list-style-type: none;
	padding-right:50px;
}

.head-nav-sub li {
	display: inline;
	margin-left:15px;
	font-size: clamp(10px, 1.2vw, 14px);
	font-weight:700;
}

.head-nav-sub li a{
	color:var(--color-gray1);
	text-decoration:none;
	position: relative;
	display: inline-block;
	font-weight:700;
	transition: all .3s;
	opacity: 1;
}

.head-nav-sub li a:hover{
	opacity: 0.6;
}



.head-menu-top{
    display:flex;
    align-items: center;
	justify-content: flex-end;
	padding-bottom:13px;
	color:var(--color-white);
	font-size: clamp(10px, 1.2vw, 14px);
	font-weight:700;
}

.head-menu-top-box1{
	background-color:var(--color-yellow);
	padding:15px;
	height:50px;
	border-bottom-left-radius: 15px;
}

.head-menu-top-link{
	color:var(--color-blue1);
	text-decoration:none;
	opacity: 1;
	padding:20px;
	transition: all .3s;
}
.head-menu-top-link:hover{
	color:var(--color-blue1);
	opacity: 0.7;
	cursor: pointer;
	cursor: hand;
}







.head-menu-logo-sp{position:absolute;top:20px;left:20px;z-index:100;height:60px;}
.head-menu-logo-sp img{width: 150px;}

/* # =================================================================
   # footer
   # ================================================================= */
   
footer {
	padding-bottom: 100px;
	color:var(--color-white);
	background-color:var(--color-blue1);
}

.flex-footer{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

.flex-footer-box{
	width:50%;
}


.flex-footer-box a{
	color:var(--color-white);
	text-decoration:underline;
}

.flex-footer-box a:hover{
	color:var(--color-white);
	text-decoration:none;
}

.footer-logo{margin-bottom:30px;}
.footer-logo img{width:200px;}

.footer-txt{
	line-height:180%;
	text-align:left;
}

.flex-footer-box ul{list-style-type: none;padding-left:25px;}
.flex-footer-box li{padding-bottom:15px;}
.footer-li-border1{padding-top:25px;border-top:solid 1px var(--color-gray2);}
.footer-li-border2{padding-top:25px;margin-top:10px;border-top:solid 1px var(--color-gray2);}


.footer-copy{
	margin:40px 0;
	font-size:12px;
	text-align:center;
}

/*-----------スマホ設定-----------------*/
@media screen and (max-width:768px){
	.flex-footer-box{width:100%;}
	.flex-footer-box ul{padding-left:0;}
	.footer-li-border1{margin-top:50px;}
}
@media screen and (max-width:599px){
	.footer-logo img{width:250px;}
}




/* # =================================================================
   # CTA
   # ================================================================= */

#cta {
	width: 100%;
	background:var(--color-blue1);
	padding:80px 0;
}


#cta p{
	font-size:18px;
	font-weight:700;
	color: var(--color-white);
	text-align:center;
	margin-bottom:30px;
}


#cta .ctabtn {
	display:block;
	background-image: url(../img/yaji_blue.svg);
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: right 10px center;
	font-size:18px;
	font-weight:700;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:15px;
	background-color:var(--color-yellow);
	color: var(--color-blue1);
	transition: all .5s;
	text-decoration:none;
	line-height:150%;
	width:60%;
	margin-top:20px;
	border-radius:10px;
}


#cta .ctabtn:hover{
	background-image: url(../img/yaji_blue.svg);
	color: var(--color-blue1) !important;
	background-color:var(--color-yellow2);
	text-decoration:none;
	cursor: pointer;
}

@media screen and (max-width:768px){
	#cta .ctabtn{width: 100%;}
}


/* # =================================================================
   # 固定CTA
   # ================================================================= */

#follow {
	width: 100%;
	height: 100px;
	background: var(--color-blue1);
	box-shadow: 0px -6px 13px -7px rgba(0, 0, 0, 0.3);
	position: fixed;
	bottom: -100px;
	left: 0;
	z-index: 10;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#follow.show {
	bottom: 0;
}


#follow .ctabtn1 {
	display:block;
	background-image: url(../img/yaji_blue.svg);
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: right 10px center;
	font-size:18px;
	font-weight:700;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:15px;
	background-color:var(--color-yellow);
	color: var(--color-blue1);
	transition: all .5s;
	text-decoration:none;
	line-height:150%;
	width:60%;
	margin-top:20px;
	border-radius:10px;
}


#follow .ctabtn1:hover{
	background-image: url(../img/yaji_blue.svg);
	color: var(--color-blue1) !important;
	background-color:var(--color-yellow2);
	text-decoration:none;
	cursor: pointer;
}


		
		
/*-----------スマホ設定-----------------*/
@media screen and (max-width:768px){
	#follow .ctabtn1{width: 90%;}
}
@media screen and (max-width:599px){
	#follow {height: 120px;bottom: -120px;}
}