@charset "UTF-8";

/* # =================================================================
   # フォント設定
   # ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');
@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;
}

@media screen and (max-width:768px){
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: auto;
}
}

*,
::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;
}



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

:root {
    --color-white: #ffffff;
	--color-bk: #000000;
    --color-gray1: #333333;
    --color-gray2: #91999E;
	--color-gray3: #D9D9D9;
	--color-gray4: #f7f7f7;
	--color-gray5: #E6E6E6;
	--color-blue1: #0068B7;
	--color-blue2: #2D4D8E;
	--color-blue3: #ADDEF8;
	--color-blue4: #EBF1FC;
	--color-red: #B81C22;
	--color-yellow: #FFF100;
}



/* # =================================================================
   # 共通設定
   # ================================================================= */
   
   
body {
	font-family: 'Inter','Noto Sans JP', sans-serif;
	background-color:var(--color-white);
	color:var(--color-bk);
	font-display: swap;
	font-size: 14px;
	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:120px;}
.page-block-btm{padding-bottom:120px;}

.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-sp{display:none;}
.br-mb{display:none;}


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

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

@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;}
}



/* # =================================================================
   # 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-logo {
    padding: 0 0 0 20px;
    flex-shrink: 0;
}

.head-menu-logo a {
    position: relative;
    display: block;
    width: 150px;
    line-height: 0;
}

.head-menu-logo img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* 通常時：白ロゴ */
.head-menu-logo .logo-white {
    position: relative;
    opacity: 1;
}

/* 青ロゴを重ねる */
.head-menu-logo .logo-blue {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* スクロール後 */
#global-h-nav.m_fixed .logo-white {
    opacity: 0;
}

#global-h-nav.m_fixed .logo-blue {
    opacity: 1;
}

.head-menu {
    display: flex;
    align-items: center;
    height: 100%;
}

.head-nav1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.head-nav1 ul {
    padding: 0px;
    list-style-type: none;
}

.head-nav1 li {
    display: inline;
    padding-top: 0;
    padding-left: 0.2rem;
    font-size: clamp(10px, 1.2vw, 14px);
    text-align: center;
}

.head-nav1 li:last-child{
	padding-right:20px;
}

.head-nav1-link-txt{padding-right:1rem;}

.head-nav1-link{
	text-decoration: none;
	color:var(--color-white);
	transition: all .5s;
	font-weight:500;
	mix-blend-mode: difference;
}

.head-nav1-link-btn{
	display:block;
	font-size: clamp(10px, 1.2vw, 14px);
	font-weight:700;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	background-color: var(--color-blue1);
	color: var(--color-white);
	transition: all .5s;
	text-decoration:none;
	line-height:150%;
	width:200px;
	border-radius:5px;
	box-shadow: 2px 2px 3px var(--color-bk);
}

.head-nav1-link-btn:hover{
	background-color: var(--color-blue2);
	color: var(--color-white);
}

.head-nav1-link:hover{
	opacity: 0.6;
}

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


@media screen and (max-width: 599px) {
    .head-menu-logo {
        padding: 0 0 0 20px;
        text-align: left;
    }

    .head-menu-logo a {
        width: 65px;
    }
}

@media screen and (min-width: 769px) {

    /* ヘッダー全体 */
    #global-h-nav {
        height: 65px;
    }

    #global-h-nav .head-menu {
        position: relative;
        display: block;
        height: 65px;
        min-height: 65px;
        padding: 0;
        margin: 0;
    }

    /* ロゴを上下中央へ */
    #global-h-nav .head-menu-logo {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
        padding: 0;
        margin: 0;
    }

    #global-h-nav .head-menu-logo a {
        display: block;
        width: 150px;
        line-height: 0;
    }

    /* メニューを上下中央へ */
    #global-h-nav .head-nav1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        width: auto;
        height: 65px;

        margin: 0;
        padding: 0;
        transform: none;
        list-style: none;
    }

    /* メニュー項目 */
    #global-h-nav .head-nav1 li {
        display: flex;
        align-items: center;
        padding-top: 0;
        margin-top: 0;
    }

}


/* # =================================================================
   # footer
   # ================================================================= */

footer {
	padding-bottom: 100px;
	color:var(--color-bk);
	width:100%;
}




.footer-logo{margin-bottom:30px;text-align:center;}
.footer-logo img{width:230px;}


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

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

@media screen and (max-width:599px){
	.footer-logo img{width:200px;}
}



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

#cta {
	width: 100%;
	background: rgb(0,104,183);
background: linear-gradient(90deg, rgba(0,104,183,1) 0%, rgba(173,222,248,1) 100%);
	padding:50px 0;
}


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




#cta .ctabtn {
	display:block;
	font-size:18px;
	font-weight:700;
	text-decoration:none;
	line-height:150%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	padding:25px 15px;
	background-color:var(--color-white);
	border:solid 1px var(--color-white);
	width:100%;
	position: relative;
	overflow: hidden;
	transition: ease .2s;
	border-radius:10px;
}

#cta .ctabtn span{
	position: relative;
	display:block;
	background-image: url(../img/yaji_blue.svg);
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: right 20px center;
	color: var(--color-blue1);
	z-index: 2;
}

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

.ctabtn-bg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color:var(--color-blue1);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.ctabtn-bg:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
		
		
/*-----------スマホ設定-----------------*/
@media screen and (max-width:768px){
	#cta .cta-flex{width: 100%;flex-wrap:wrap;}
}
@media screen and (max-width:599px){
	#cta {padding:30px 0;}
	#cta p{font-size: 16px;margin-bottom:20px;}
	#cta .cta-flex-box{width: 100%;}
	#cta .ctabtn {font-size: 16px;width: 100%;;}
}

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


#follow {
	width: 100%;
	height: 100px;
	background-color:var(--color-blue1);
	box-shadow: 0px 0px 11px -4px #777777;
	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-white);
	text-decoration:none;
	cursor: pointer;
}


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


/* # =================================================================
   # linkbox
   # ================================================================= */

.linkbox {
    position: relative;
	cursor: pointer;
}

.linkbox .divlink{
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
	z-index:2;
}