@charset "UTF-8";
/* CSS Document */
html {
  font-size:62.5%;
  }
body{
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #F1F3F4;
}
section{
  padding-bottom: 80px;
}
img{
  max-width: 100%;
}
figure{
  margin: 0;
}
h1,h2,h3{
  font-weight: initial;
  text-align: center;	
} 
h1{
  font-size:80px;
  color: #fff;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.05em;	
}
h2{
  font-size:50px;
  color: #fff;
}
h3{
}
.title_m{
  font-size: 20px;
  color: #ffffff;
  background-color: #cc0000;
  padding: 8px;
  margin-bottom: 80px;
  letter-spacing: 0.2em;
  margin-top: 0;
}
h4{
  font-size: 20px;
  font-weight: initial;
  text-align: left;
  position: relative;
  padding-left: 2em;
}

h4::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 50vh;
}

h4::after {
  content: '';
  position: absolute;
  top: 50%;
  left:10px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #222222;
  border-right: 2px solid #222222;
}
p{
  margin-top:20px;
  text-align: left;
  line-height: 1.8;
  font-size: 14px;
}
.topics_content{
  margin-top: 0;
}
small{
  color:#9a9a9a;
  display: block;
  text-align: center;
  font-size:10px;
  padding: 16px;
  letter-spacing: .2rem;
}
li{
  list-style: none;
  text-align: left;
  line-height: 2.2;
  font-size: 14px;
}
.u-only__sp{
  display: none;
}
a {
  color: #1075a6;
}
/*========= スペースCSS ===============*/
.mb1{
  margin-bottom: 10px;
}



/*========= headerSNSCSS ===============*/
.fa-ul{
  display: flex;
  color: #ffffff;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
.fab{
  color: #ffffff;
}
/*========= menuCSS ===============*/
.header_nav{
  background-color: #24232314; 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	z-index: 99;
  transition: all 0.5s ease;
}
.header_nav .wrap{
	display: flex;
	width: 240px;
	right: 24px;
}
.header_nav .headerColor-default {
  background-color: #24232326;
  /* （画像よりも下までスクロールした時に変えたい背景色） */
}
.header_nav .item{
  width: 200px;
  position: absolute;
  top: 16px;
  right: 140px;
}
.header_nav .menu{
   height: 16px;
   right: 40px;
   top: 22px;
   width: 48px;
   position: absolute;
}
.menu__line{
   background: #fff;
   display: block;
   height: 2px;
   position: absolute;
   transition:transform .3s;
   width: 100%;
   color: #fff;
}
.menu__line__bottom{
   bottom: 0;
}
.menu__line__top.active{
   top: 9px;
   transform: rotate(45deg);
}
.menu__line__bottom.active{
   bottom: 6px;
   transform: rotate(135deg);
}
/*gnav*/
.gnav{
   background: #222222;
   display: none;
   height: 100%;
   position: fixed;
   width: 100%;
   z-index: 98;
}
.gnav__wrap{
   display: flex;
   width: 100%;
   height: 100%;
   margin: auto;
  /* position: absolute;*/
}
.gnav__menu__item{
   margin: 1.8rem 0;
}
.gnav__menu__item a{
   color: #9a9a9a;
   font-size: 2.0rem;
   font-weight: revert;
   letter-spacing: .2rem;
   /*padding: 2.5rem;*/
   text-decoration: none;
   transition: .2s;
}
.gnav__menu__item a:hover{
   color: #ffffff;
}

ul.gnav__menu {
   margin-left: 0;
   padding-bottom: 0;
   position: absolute;
   text-align: right;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

/*========= レイアウトCSS ===============*/
.inner{
  max-width: 760px;
  margin: 0 auto;
}
.center{
  display: block;
  text-align: center;
}
.flex{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex_center{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

/*========= btn link CSS ===============*/
.permalink{
	text-decoration: none;
  color: #000000;
  font-size: 14px;
}
.permalink:active{
  color: #333333;
}

a {
	text-decoration: none;
	letter-spacing: 0.05em;
}
.btn01,.btn02{
  margin-top: 40px;
}
.btn01 a {
  display: block;
  position: relative;
  margin-left: auto;
  padding: 0.5em 2em;
  width: 240px;
  color: #222222;
  font-size: 18px;
  border: 2px solid #222222;
}
.btn01 a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 50vh;
}

.btn01 a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 43px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #CC0000;
  border-right: 2px solid #CC0000;
}
.btn01 a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #CC0000;
  border: 2px solid #CC0000;
}
.btn01 a:hover::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background-color: #CC0000;
}	
.btn01 a:hover::before {
  background-color: #CC0000;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  border: 2px solid #ffffff;
}	

.btn02 a {
  display: block;
  position: relative;
  margin-left: auto;
  padding: 0.5em 2em;
  width: 240px;
  color: #FFFFFF;
  font-size: 18px;
  border: 2px solid #ffffff;
}
.btn02 a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 50vh;
}

.btn02 a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 43px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #CC0000;
  border-right: 2px solid #CC0000;
}
.btn02 a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #CC0000;
  border: 2px solid #CC0000;
}
.btn02 a:hover::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background-color: #CC0000;
}	
.btn02 a:hover::before {
  background-color: #CC0000;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  border: 2px solid #ffffff;
}

.btn03 a {
  display: block;
  position: relative;
  margin-left: auto;
  padding: 0.5em 2em;
  width: 240px;
  color: #FFFFFF;
  font-size: 18px;
  border: 2px solid #ffffff;
}
.btn03 a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 50vh;
}

.btn03 a::after {
  content: '';
  position: absolute;
  top: 60%;
  right: 42px;
  transform: translateY(-125%) rotate(132deg);
  width: 8px;
  height: 8px;
  border-top: 2px solid #CC0000;
  border-right: 2px solid #CC0000;
}
.btn03 a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #CC0000;
  border: 2px solid #CC0000;
}
.btn03 a:hover::after {
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background-color: #CC0000;
}	
.btn03 a:hover::before {
  background-color: #CC0000;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50vh;
  border: 2px solid #ffffff;
}


/*========= footerCSS ===============*/
footer{
  background-color: #000000;
}
.fnav__wrap{
  margin: 0 auto;
  padding: 80px 0;
}
.fnav__menu {
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.fnav__menu__item a{
  color: #9a9a9a;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  text-decoration: none;
  transition: .2s;
}
.fnav__menu__item a:hover{
    color: #ffffff;
}
/*========= タブレット ===============*/
@media screen and (max-width: 768px) {
  .flex_center{
    align-items: flex-start;
  }
} 
@media screen and (max-width: 599px) {
	.gnav__menu__item {
    margin: 1rem 0;
  }
  .u-only__sp{
	  display: block;
	  }
	.u-only__pc{
	  display: none;
	  }
  .header_nav .item{
    top: 20px;
    left: 0;
  }
  .header_nav .menu{
    top: 20px;
    right: 8px;
  }      
	h3{
		margin-bottom: 40px;
	}
	.inner{
	  padding: 0 12px;
	}
	.btn01 a, .btn02 a {
	  margin:  0 auto;
	  }
	.btn03{
	  margin-bottom: 24px;
	}
}