@charset "utf-8";

/*
 * "Fredericka" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* *****共通設定***** */
.rounded-1 {
  border-radius: 1rem !important;
}
.rounded-2 {
  border-radius: 2rem !important;
}
.rounded-3 {
  border-radius: 3rem !important;
}
.rounded-4 {
  border-radius: 4rem !important;
}

/* ボーダーの太さ */
.border-2{
  border-width:2px !important;
}

.border-3{
  border-width:3px !important;
}

.border-4{
  border-width:4px !important;
}

.border-5{
  border-width:5px !important;
}

/* アンダーライン */
.u{
  text-decoration: underline;
}

/* アンダーライン */
.b{
  font-weight: bold;
}


/* 追加 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  word-break: break-all;
}

html {
  /* font-size: 62.5%; */
  /* font-size: 62.5%; */
}
@media (max-width: 500px) {
  /* 横幅が320px以下の場合に適用するスタイル */
  /* html { font-size: 90%; } */
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic",  Meiryo, sans-serif;
  /* font-family: 'Fredericka the Great', serif; */
  /* font-family: 'M PLUS 2', sans-serif; */

  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  word-wrap : break-word;
  overflow-wrap : break-word;

  color: #000;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}



:focus {
  outline: none;
}


picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  margin-block: 0;
  margin-inline: auto;
}

a,
button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

p,
dl,
ul,
ol,
form,
.box,
.scrollbox {
 /* margin-block: 2.5rem;*/
  margin-inline: auto;
}



nav ul {
  list-style: none;
  padding: 0;
}

main {
  hanging-punctuation: allow-end;
}


.navbar {
  display: flex;
  align-items: flex-end;

  /* padding: 0 1rem; */
  padding: 0.25rem;
}

.navbar-brand  {
  padding: 0;
}

.navbar-brand img {
  /* height: 60px; */
  max-height: 60px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);

  padding: 0.25rem 0.5rem;
  width: 50px;
  height:50px;
}

.js-fadein {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s,visibility 2s, transform 2s;
}
.js-fadein.inview {
  opacity: 1;
  visibility: visible;
}

.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}

.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* 下からフェードイン */
.js-fadeBottom {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeBottom.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


/* 上からフェードイン */
.js-fadeTop {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeTop.inview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


/* 左からフェードイン */
.js-fadeLeft {
    opacity: 0;
    visibility: hidden;
    transform: translateX(80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeLeft.inview {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

/* 右からフェードイン */
.js-fadeRight {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeRight.inview {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}






/* お知らせ */
#news  {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#news .news-header {
  
  justify-content: center;
  align-items: center;
}
#news .news-header div {
  text-align: center;
  color: white;
  background-color: #06C755;
  padding: 0.5rem 1.5rem;
  margin: 0;
  border-radius: 0.25rem;
}


ul.new {
  padding: 1rem 2rem;
}
ul.new li:first-child {
  border-top: 1px solid #ccc;
}
ul.new li {
  list-style-type: none;
  display: flex;
  justify-content:flex-start;

  padding: 1rem;
  border-bottom: 1px solid #ccc;

}
ul.new li time {
  font-weight: 600;
  white-space: nowrap;
}
ul.new li div {
  padding-left: 10px;
}


.btn2 {
    line-height: 1.2;
    padding: 10px 30px;
    /* position: absolute; */

    width: 100%;
    max-width: 350px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -32px;
    z-index: 0;
    background-color: #fff;
    color: #28a745;
    border-radius: 40px;
    border: 3px solid #28a745;
}
.btn2, a.btn2, button.btn2 {
  font-size: 1rem;
  font-weight: 700;

  display: inline-block;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
}
.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 0.5rem;
}



/* hero  */
.herobox {
  /*margin-top: 200px;  *//* ヘッダーの高さを設定 */
}
.slider {
  /* height: 80vh; */
  max-height: 100vh;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  width: 100%;
  position: relative;

}
.slick-img img {
  width: 100%;
  opacity: 1;
  height: 800px;
  object-fit:cover;
  object-position: 50% 100%;
}
.slick-dotted.slick-slider {
  margin-bottom: 0px;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 15s linear 0s normal both;
}

.slick-outer{
  position: relative;
  background-color: black;

}
.slick-content{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1250;
  color: #000;
  width: 100%;
  margin: 0;
  /* padding: 14rem 3rem; */
  overflow-wrap: break-word;
  /* -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright; */
}
.slick-content h1 {
  font-weight: 700;
  /* font-size: 2.5rem; */
  line-height: 1.2;
  text-shadow: 1px 1px 3px #000;
}
.slick-content p {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-shadow: 1px 1px 3px #000;
}
.slick-content hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;

  box-shadow: 1px 1px 3px #000;
  border-width: 0.2rem;
}
.slick-content .btn {
  margin-top: 2rem;
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 30px;
  text-shadow: 1px 1px 3px #666;
  padding: 0.6rem 1.2rem;
}

.vcontener {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

  height: 100%;
  display: flex;
  /* justify-content: center; */
  justify-content: flex-start;
  align-items: center;

}
.vfont-ssb {
  font-size: calc((100vw - 1920px) / 80 + 48px) !important;

}
.vfont-ss {
  font-size: calc((100vw - 1920px) / 160 + 20px) !important;

}

.vfont-sm {
  font-size: calc((100vw - 1920px) / 40 + 72px) !important;

}
.vfont-md {
  font-size: calc((100vw - 1920px) / 70 + 72px) !important;

}

.vfont-lg {
  font-size: calc((100vw - 1920px) / 66 + 84px) !important;

}

.vtext {
  font-size: calc((100vw - 1366px) / 60 + 42px) ;
  margin : 3rem 10rem 1rem 10rem;
}

/* arrow */
.slick-arrow{
  z-index: 2;
  top: 50%;
  width: 20px;
  height: 20px;
  border-top: 5px solid orange;
  border-right: 5px solid orange;
  opacity: .8;
}
.slick-arrow::before{
  content: '';
}
.slick-prev{
  left: -1rem;
  transform: rotate(-135deg);
}
.slick-next{
  right: -1rem;
  transform: rotate(45deg);
}

/* dots */
.slick-dots{
  /* bottom: -25px; */
  bottom: 10px;
}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before{
  width: 16px;
  height: 16px;
}
.slick-dots li{
  margin: 0 7px;
}
.slick-dots li button{
  background-color: #fff;
  opacity: .5;
  border-radius: 100%;
}
.slick-dots li.slick-active button{
  /* opacity: .4; */
  background-color: rgb(41, 233, 41);
}
.slick-dots li button::before{
  content: '';
}



.slide-item {
  width: 200px;
}
.slide-item .row {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  margin-bottom: 1.5rem;
}
.slide-item .card {
  border-radius: 0.5rem;
  
}
.slide-item .card-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.slidebox{
  /* overflow-x: hidden;    */
}
.slick-list{
  /* overflow: visible;    */
}
.slider-for img{
  width: 100%;
  /* height: 250px; */
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;

}


/* ページャー */
.my-dots {
  text-align: center;
  padding:0;
  margin-top: 0px;
}
.my-dots li{
  display: inline !important;
  margin: 0.5em;
}
.my-dots li button{
  display: inline !important;
  width: 1em;
  height: 1em;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
  text-indent: 2em;
  border: none;
  /* border-radius: 100%; */
}
.my-dots li.slick-active button{
  background-color: orange;
}



 /* ここからボタンのデザイン */
 #page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 24px;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #28a745;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #28a745;
}

/* fadeinクラスがついた時だけ表示する */
#page_top.fadein {
  opacity: 0.6;
}

/* ここまでボタンのデザイン */

/* スマートフォンの場合 */
@media(min-width : 480px){
  .slider-for img{
      /* max-width: 300px; */
      /* border: 10px solid #fff; */
  }
  /* .slider-for .slick-current img{
      transform: scale(1.15);
  } */

}


#sec1 p {
  font-size: 3rem;
  background-color: #89f5a0cb;
  padding: 0.75rem;
}
/* 大デバイス（デスクトップ, 1200px 未満） */
@media (min-width: 1200px) {
  #sec1 p {
   font-size: 3.25rem;
 }
}
/* 大デバイス（デスクトップ, 1200px 未満） */
@media (max-width: 1199.98px) {
  #sec1 p {
   font-size: 2.5rem;
 }
 html {
  font-size: 90%;
}
}
/* 中デバイス（タブレット, 992px 未満） */
@media (max-width: 991.98px) {
  #sec1 p {
   font-size: 2.0rem;
 }
 html {
  font-size: 85%;
}
}
/* 小デバイス（横向きモバイル, 768px 未満） */
@media (max-width: 767.98px) {
 #sec1 p {
   font-size: 1.5rem;
 }
 html {
  font-size: 80%;
}
}
/* 極小デバイス（縦向きモバイル, 576px 未満） */
@media (max-width: 575.98px) {
  #sec1 p {
   font-size: 1.25rem;
 }
  html {
    font-size: 70%;
  }
}


/* sec3 MISSION */
#sec2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
h2 {
  font-size: 3.5rem;
  /* font-weight: 400; */
  line-height: 1.2;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /* font-family: 'Fredericka the Great', cursive; */
  /* font-family: 'Fondamento', cursive; */
  /* font-family: 'Alumni Sans Collegiate One', sans-serif; */
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  color: #448a65;
}

#sec2 .container > p {
  font-size: 1.25rem;
}
#sec2 .mission {
  text-align: center;
}
#sec2 .mission img {
  vertical-align: middle;
  max-width: 100%;
  width: 100%;
  margin-bottom: 1rem;
}
#sec2 .mission .btn {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  display: block;
  width: 100%;
}

#sec3 .card:hover {
  transform: translateY(-10px);
  /* opacity: 0.6; */
}

/* sec7 案内 */
#sec7 {
  padding-top: 8rem;
  padding-bottom: 8rem;
  text-align: center;
  background-image: url(../img/IMG_6272.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80%;
}
#sec7 h1 {
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  background-color: #ccffccee;
}
#sec7 .btn {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 3rem;
  font-size: 1.25rem;
  font-weight: 700;;
  line-height: 1.5;
  border-radius: 1rem;
  color: white;
}




footer {
  position: relative;
}
footer  {
  /* background: #f1efff url("../img/footer-bg.png") no-repeat center center; */
  /* background-size: cover; */
  /* border-radius: initial; */
  width:100%;
  /* height: 500px; */
  padding-top: 2rem;
}
.footerbg2  {
  z-index: -1000;
  position:absolute;
  top: 300px;left: 50%;
  -ms-transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  background: #f1efff url("../img/footer-bg.png") no-repeat center center;
  background-size: cover;
  border-radius: initial;
  width:100%;
  height: 500px;
}
	    
@media (min-width: 576px) {
	.jumbotron {
	    padding: 14rem 2rem;
		border-radius: 0;
	}
	/* header {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    background-color: #fff;
	    z-index: 1000;
	  } */
}

/* 追加ここまで */

a {
  color: #393939;
  text-decoration: none !important;
}

a:hover {
  color: #a9a9a9;
}

.bg-primary,
.btn-primary {
  /* background-color: #00008b !important; */
}

.border-primary {
  /* border-color: #00008b !important; */
}

.bg-maincolor {
  /* background-color: #f0f8ff !important; */
  /* background-color: #fffafa !important; */
  background-color: #FCFBF6 !important;
}

.btn-warning:hover {
  color: #212529;
  background-color: #ffa500;
  border-color: #ffa500;
}

.bg-yl-color {
  background-color: #fef5d3 !important;
}

.bg-lightgreen {
  background-color: #EFF5F6 !important;
}
.bg-midgreen {
  background-color: #036655 !important;
}


.text-shadow {
  text-shadow: 1px 1px 3px #000;
}

.font-patrick {
  font-family: 'Fredericka the Great', cursive;
  font-family: 'Fondamento', cursive;
  font-family: 'Alumni Sans Collegiate One', sans-serif;
}
.font-hero {
  /* font-family: 'M PLUS 2', sans-serif; */
  font-family: 'Zen Old Mincho', serif;
}
.font-serif {
  font-family: serif;
}
.font-menu {
  font-family: 'M PLUS 2', sans-serif;
}

/* ヘッダー(navbar) */
#header-sns img {
  /* height: 58px;
  width: auto;
  margin-right: 25px; */
  /* height: 29px; */
  height: 32px;
  margin-right: 1rem;
}
#header-sns a {
  display: inline-block;
}

#nac01 a,
#nav02 a {
  color: #333;
  text-decoration: none;
  position:relative;
}

#nac01 a,
#nav02 a::after {
  position: absolute;
  left: 25%;
  content: '';
  width: 50%;
  height: 2px;
  background: #00000044;
  bottom: 6px;

  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
}
  
#nac01 a,
#nav02 a:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

#nav01 {
  border-bottom: 1px solid #008b00;
}
#nav01 h5 {
  color: #008b00;
  font-weight: 700;
  font-family: 'M PLUS 2', sans-serif;
}
#nav02 a {
  /* font-size:1.25rem; */
  font-size:1.125rem;
  /* font-weight: bold; */
  /* font-family: serif; */
  font-family: 'M PLUS 2', sans-serif;
}
#nav02 .nav-fill {
  width: 100%;
}
#nav02 {
  background-image: linear-gradient(0deg, rgba(185, 245, 191, 0.5) 25%, rgba(255, 255, 255, 1));
}

#nav02 .nav-item {
  border-left: 1px solid #dee2e6;
}
#nav02 .last-list-md {
  border-right: 1px solid #dee2e6;
}
#nav02 .nav-item:hover {
  /* background-color: #a5ff0044; */
  /* background-color: #00c3ff44; */
  background-color: #7eff5e44;
  /* border-radius:25%; */
}

.dropdown-menu .dropdown-item:hover {
  background-color: #00c3ff44;
}
.drop-hover:hover > .dropdown-menu {
  display: block !important;
}

/* フッター */
#footer-index a {
  text-decoration: none;
}
.footer-sns img {
  /* height: 58px;
  width: auto;
  margin-right: 25px; */
  /* height: 29px; */
  width: 32px;
  height: 32px;
  /* margin-right: 1rem; */
}
.footer-sns a {
  display: inline-block;
}
#footer-index ul ul {
  padding-left: 0.75rem;
  border-left: 1px solid #6c757d;
}

/* *****トップページ***** */
.jumbotron {
  background-image: url("../img/top-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}


/* *****下層ページ***** */
.breadcrumb {
  background-color: transparent;
}
.breadcrumb-item a {
  text-decoration: none;
}
.breadcrumb-item + .breadcrumb-item:before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: small;
  /* color: #fff; */
}

#page .jumbotron {
  background: #f1efff url("../img/01.png") no-repeat center center;
  background-size: cover;
  border-radius: initial;
  height: 300px;
  padding: 5rem 0;
}

.sample-subtitle {

  color:#333;
  -moz-text-shadow: 2px 2px 6px rgba(112, 105, 112, 0.3);
  -webkit-text-shadow: 2px 2px 6px rgba(112, 105, 112, 0.3);
  -ms-text-shadow: 2px 2px 6px rgba(112, 105, 112, 0.3);
  text-shadow: 2px 2px 6px rgba(112, 105, 112, 0.3);
}

#page .jumbotron h1 {
  font-size: clamp(18px, 6vw, 56px);
  /* font-size: 56px; */
}
#page .jumbotron h3 {
  font-size: clamp(16px, 3vw, 28px);
  /* font-size: 58px; */
}




/* 追加コンテンツエリア */
:root {
  --text-color: #555;
  --bg-color: var(--white);
  --required-color: var(--theme-color2-default);
  --white: #fff;
  --theme-color1-light: #b0e2dd;
  --theme-color1-default: #60c5ba;
  --theme-color2-default: #f759a5;
  --theme-color3-default: #bddceb;
  --theme-color4-default: #feee7d;
  --theme-color5-default: #f2f2f2;
}

.area.area-icon {
  margin: 15px auto;
  width: 150px;
  height: 150px;
  overflow: hidden;
  object-fit: cover;
}
.area.area-icon img {
  object-fit: cover;
  max-width: 100%;
  min-height: 100%;
}
.area.area-icon.type-circle {
  border-radius: 50%;
}
.area.area-icon.type-rounded {
  border-radius: 8px;
}
.area.area-icon.size-sm {
  width: 100px;
  height: 100px;
}
.area.area-icon.size-lg {
  width: 200px;
  height: 200px;
}
.area.area-link a {
  display: inline-block;
  margin: 3px 1px;
  padding: 7px 10px;
  background: var(--theme-color5-default);
  border-radius: 5px;
  color: var(--text-color);
}
.area.area-link a::before {
  margin-right: 5px;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
  font-weight: 900;
  vertical-align: middle;
}
.area.area-link a i {
  margin-right: 5px;
}
.area.area-link a hr {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  border: 0;
}
.area.area-link.link-icon a, .area.area-link.link-icon-circle a {
  width: 38px;
  text-align: center;
}
.area.area-link.link-icon a::before, .area.area-link.link-icon-circle a::before {
  margin-right: 0;
}
.area.area-link.link-icon a i, .area.area-link.link-icon-circle a i {
  margin-right: 0;
}
.area.area-link.link-icon-circle a {
  border-radius: 50%;
}
.area.area-link.link-block, .area.area-link.link-column {
  display: grid;
  gap: 5px;
  margin-block: 5px;
}
.area.area-link.link-block a, .area.area-link.link-column a {
  display: block;
  margin: 0;
}
.area.area-link.link-block {
  grid-template-columns: 1fr;
}
.area.area-link.link-column {
  grid-template-columns: repeat(2, 1fr);
}
.area.area-link.link-color a {
  color: var(--white);
  background: var(--text-color);
}
.area.area-link.link-color a.tiktok {
  background: #000000;
}
.area.area-link.link-color a.x-twitter {
  background: #0f1419;
}
.area.area-link.link-color a.linkedln {
  background: #0a66c2;
}
.area.area-link.link-color a.line {
  background: #06C755;
}
.area.area-link.link-color a.twitter {
  background: #1da1f2;
}
.area.area-link.link-color a.facebook {
  background: #4267b2;
}
.area.area-link.link-color a.instagram {
  background: #f13f79 ;
}
.area.area-link.link-color a.tumblr {
  background: #39475d;
}
.area.area-link.link-color a.pinterest {
  background: #bd081c;
}
.area.area-link.link-color a.youtube {
  background: #ff0000;
}
.area.area-link.link-color a.skype {
  background: #00b0f0;
}
.area.area-link.link-color a.discord {
  background: #5865f2;
}
.area.area-link.link-color a.steam {
  background: #1dafec;
}
.area.area-link.link-color a.marshmallow {
  background: #eb5158;
}
.area.area-link.link-color a.pixiv {
  background: #0096fa;
}
.area.area-link.link-color a hr {
  background: rgba(255, 255, 255, 0.3);
}
.area .web::before {
  content: "\f0ac";
}
.area .heart::before {
  content: "\f004";
}
.area .star::before {
  content: "\f005";
}
.area .bookmark::before {
  content: "\f02e";
}
.area .book::before {
  content: "\f02d";
}
.area .image::before {
  content: "\f03e";
}

.ares .tiktok::before,
.area .x-twitter::before,
.area .linkedln::before,
.area .line::before,
.area .twitter::before,
.area .facebook::before,
.area .instagram::before,
.area .tumblr::before,
.area .pinterest::before,
.area .youtube::before,
.area .skype::before,
.area .discord::before,
.area .steam::before {
  font-weight: 400 !important;
}
.area .tiktok::before {
  content: "\e07b";
}
.area .x-twitter::before {
  content: "\e61b";
}
.area .linkedln::before {
  content: "\f08c";
}
.area .line::before {
  content: "\f3c0";
}
.area .twitter::before {
  content: "\f099";
}
.area .facebook::before {
  content: "\f09a";
}
.area .instagram::before {
  content: "\f16d";
}
.area .tumblr::before {
  content: "\f173";
}
.area .pinterest::before {
  content: "\f0d2";
}
.area .youtube::before {
  content: "\f167";
}
.area .skype::before {
  content: "\f17e";
}
.area .discord::before {
  content: "\f392";
}
.area .steam::before {
  content: "\f1b6";
}


/* 追加コンテンツエリア ここまで */


/* CSSコード */
.iframe-wrp {
  position: relative;
  width: 100%;
  padding-top: 75%; /* = height ÷ width × 100 */
  padding-top: 35%;
}
.iframe-wrp iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.dot-box {
  margin     : auto;
  /* max-width  : 500px; */
  /* height     : 200px; */
  /* ドット（水玉）模様のCSS */
  background-color   : transparent;
  background-image   : radial-gradient(#80ff00aa 9%, transparent 10%),
                       radial-gradient(#80ff00aa 9%, transparent 10%);
  background-position: 0 0, 6px 6px;
  background-size    : 12px 12px;
}
.border-10 {
  border-width: 10px !important;
}
.border-15 {
  border-width: 15px !important;
}
.border-20 {
  border-width: 20px !important;
}

.custom {
  font-size: 1.25rem;
  line-height: 2rem;
  text-align: justify;
  letter-spacing: 0.1em;
  font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


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

 レスポンシブ

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

@media (max-width: 991.98px) {
  /* md タブレット・スマートフォン向け */

  #nav02 .nav-item {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
    letter-spacing: 0.25rem;
  }

  .herobox {
    margin-top: 0;
  }
  .slider {
    height:auto;
  }
  .slick-content{
    top: 50%;
    padding: 1rem 1rem;
  }
  .slick-img img {
    height: 640px;
  }
}
  @media (max-width: 575.98px) {
    /* xs スマートフォン向け */

    .slick-img img {
      height: 480px;
    }

    .iframe-wrp {
      padding-top: 75%; /* = height ÷ width × 100 */
    }
    

    /* フッター */
    #footer-sns img {
      height: 29px;
      margin-right: 15px;
    }
  }