/*
Theme Name: type-TN25
Author: TN
Version: 4.3, 2025.01
*/

@charset "UTF-8";

/*------------------------------------------------------------
	header - nav
------------------------------------------------------------ */
header { position: absolute; width:100%; padding:0; background: rgba(255,255,255,1); top:0; z-index: 9999;}
.inner { width:97%; height:90px; margin: 0 0 0 3%; padding:0; display:flex; align-items:center; }
header h1, header p { position: relative; line-height:1; font-size:1em; text-align: center; display: flex; align-items: center; width: 15vw; max-width: 240px;}
header h1 a { display:block;}
header img { width: 100%; margin: 0 .8em 0 0;}

#mobile-head { margin: 0 auto 0 0;}
header nav ul { display:flex; }
header nav li { margin-left:2em; min-height:90px; display: flex; align-items: center; text-decoration:none; font-size:1vw;}
header nav > ul > li > span,
header nav > ul > li > a { position:relative; display:block; text-decoration:none; font-size:1.1vw; text-align:center; line-height:1; font-weight: 500;}

header nav li:last-child a { height: 100%; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 2em; background: rgba(79, 23, 127, .55);}
header nav li:last-child a:hover { background: rgba(79, 23, 127, .7);}


/* FIXED */
header.fixed { position: fixed !important; top:0; bottom:inherit !important; width:100%; background: rgba(255,255,255,.6); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);}
header.fixed .inner { height:80px; }
header.fixed img { width: 12vw; max-width: 200px;}
header.fixed h1 span, header.fixed p span { display: none;}
header.fixed nav li { min-height: 80px;}
header.fixed nav > ul > li > a { font-size:1vw;}

/*hover*/
nav a::before, nav a::after, nav a.on::before, nav a.on::after{
  position: absolute;
  bottom: -.5em;
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--main);
  transition:all .25s ease;
}
nav a::before { display:none; }
nav a::after { right: 0%; }
nav a:hover::after{ width:100%; }
nav a:hover { color: var(--main);}
nav li:last-child a::after,
nav li:last-child a::before { display: none;}

/* Toggle Button */
#nav-toggle { display: none; position: relative; right: 0; top: 0; width: 36px; height: 36px; cursor: pointer; z-index: 999; }
#nav-toggle div { position: relative; width:100%; margin:6px 0; }
#nav-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: var(--main); left: 0; transition: .35s ease-in-out; border-radius: 20px; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 12px; }
#nav-toggle span:nth-child(3) { top: 23px; }

@media(min-width:1400px) {
  header nav > ul > li > span,
  header nav > ul > li > a { font-size:16px;} 
  header.fixed nav > ul > li > a { font-size:15px;}
}
@media(max-width:767px) {
    header { position:fixed; top:0; left:0; }
    header, .inner { width: 100%; padding: 0; height: 70px;}
    .inner { width:100%; margin:0 auto; padding:0; background:rgba(255,255,255,1); }
    header h1, header p { width: 50%; margin: 0 auto 0 0;}
    header h1 a, header p a { display: block;}
    header img { width: 100%; max-width: 100%;}
    header { margin:0; top:0; }
    #mobile-head { width: 92%; margin:0 auto; padding:0; position: relative; display: flex; align-items: center;}
    header nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top:70px;
    left:-100vw;
    background:#fff;
    width: 100%;
    height:calc(100vh - 80px);
    text-align: center;
    padding:0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    z-index: 998;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    }
    header nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 14px;
    align-items: flex-start;
    width:100%;
    }
    header nav > ul {
    width: 100%;
    padding:0;
    margin-left: auto;
    }

    header nav ul li,
    header.fixed nav li {
    position: relative;
    padding:0;
    min-height:auto;
    text-align:left;
    font-size:1.7rem;
    font-weight:normal;
    display:block;
    width:100%;
    border-bottom:1px solid #ccc;
    }
    header nav ul li a {
    width: 100%;
    display: block;
    padding: .8em 1em .9em;
    text-align:left;
    font-size:1.7rem;
    font-weight:normal;
    }

    header nav ul li::after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%,-50%);
    transition: all .2s ease-in-out;
    color: #999;
    display:block;
    color: var(--main);
    }
    header nav > ul > li:first-child { border-top:1px solid #ccc;}
    header nav li:last-child a { justify-content: flex-start; padding: .8em 1em .9em;}

    #nav-toggle, #post-menu {
    display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    header.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
    }
    header.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
    }
    header.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
    }
    /* nav スライドアニメーション */
    header.open nav {
    /* nav top + #mobile-head height */
    -moz-transform: translateX(100vw);
    -webkit-transform: translateX(100vw);
    transform: translateX(calc(100vw));
    }

    header nav ul { flex-direction:column;}
    header nav li { margin-left:0;}
    header nav a:before, header nav a:after, header nav a.on:before, header nav a.on:after { display:none; }

    header nav > ul > li > span,
    header nav ul li.drop li a { padding:0; width:100%; margin:0 auto .8em; line-height: 1;}
    header nav > ul > li > span { padding: .8em 0 0 1em;}
}
@media(max-width:320px) {
nav ul li { padding-top:.6em; }
header nav ul li a, header.fixed nav ul li a { padding: 1em 0 0; font-size:1.6rem; }
header nav ul li a.onlySp, header.fixed nav ul li a.onlySp, header nav ul li a span, header.fixed nav ul li a span { font-size:1.4rem; }
}


/*------------------------------------------------------------
	BUTTON
------------------------------------------------------------ */
button, [type="button"], [type="reset"], [type="submit"] { background:none; border:0; }
button:active { color:#fff; }
.btns { text-align: center; margin:10% 0 0;}
.btns a { position:relative; text-align:center; padding: .8em 2em 1em; line-height: 1.3; display:inline-block; background: none; color: var(--main); font-size: 1.4vw; border: 1px solid var(--main); font-weight: 500; width: 400px; max-width: 100%; background: url(images/common/arrow.svg) 95% 50% no-repeat; font-family: "Oswald", sans-serif; font-weight: 500; letter-spacing: 2px;}
.btns a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btns a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(79, 23, 127, .15);
  transform: scaleX(0);
  transform-origin: right;
  transition: all .35s ease;
  transition-property: transform;
}

@media(min-width:1300px) {
    .btns a { font-size: 20px;}
}
@media(max-width:767px) {
  .btns { margin: 12% 0 0;}
  .btns a { padding: 1em 2em 1.1em; font-size: 4vw;}
}


/*------------------------------------------------------------
	COLOR
------------------------------------------------------------ */
:root {
  --main: #4F177F;
  --sub: #195888;
  --txt: #EB455F;
  --bg: #EDF0F4;
  --gray: #ccc;
  --txtlink: #2291d0;

}

/*------------------------------------------------------------
	COMMON
------------------------------------------------------------ */
main { margin-top: 90px;}
section { position:relative; width:100%; margin:0 auto; padding:0; box-sizing: border-box; }
main > section:not(:first-of-type) { margin-top: 10%;}
main > section.onBg { margin: 0; padding: 6% 0; background: var(--bg);}
.stdBx { width:1120px; max-width:88%; margin:0 auto; }
.stdBx.min { width:880px; }
.stdBx__half { display: flex; align-items: center; justify-content: space-between;}
.stdBx__half dt, .stdBx__half dd { width: 50%;}
.stdBx__half.mgn48 dt, .stdBx__half.mgn48 dd { width: 48%;}
section.bg { background: var(--bg); padding: 6% 0;}
.stdBx:not(:first-of-type) { margin-top: 8%;}

/* column */
.clmBox { position:relative; display:flex; flex-flow: row wrap; justify-content: space-between; box-sizing:border-box; }
.clmBox.normal { justify-content:flex-start; align-items:flex-start; }
.clmBox.cont-rev { justify-content:flex-end; align-items:flex-start; }
.clmBox.ali-rev { justify-content:flex-start; align-items:flex-end; }
.clmBox.all-rev { justify-content:flex-end; align-items:flex-end; }
.htmach { align-items:stretch; }
.clmBox li { display:block; padding:0; border:0; position:relative; }
.clmBox li.clmBox { display:flex; }
.clmBox img { width:100%; display:block; }
.clm2 li, .clm2 .clms { width:48%; }
.clm3 li, .clm3 .clms { width:32%;}
.clm4 li, .clm4 .clms { width:24%; }
.clm5 li, .clm5 .clms { width:19%; }
.clm2.box2 .clms { width:50%; }
.clms { box-sizing:border-box; position:relative; }
.clm3::after{content:"";display: block;width:32%;}
.clm4::before{content:"";display: block;width:24%;order:1;}
.clm4::after{content:"";display: block;width:24%;}
.clm5 .empty{width:19%; margin:0;}
.clms { margin-bottom:2%; }
.clm2 li img, .clm3 li img, .clm4 li img, .clm5 li img, .clms img { width:100%; height:auto; }
.imgauto img { width:auto !important; }
.clms a { width:100% !important; margin:0;}
.alignC { align-self:center; }
.alignC img { display:block; margin:auto; }
.clumn { display:flex !important; flex-direction:column; align-items: flex-start;}
.last-end-row { margin-right:auto; }
.last-end-clm { margin-top:auto; }

@media(max-width:767px) {
  main { margin-top: 70px;}
  main > section:not(:first-of-type) { margin-top: 16%;}
  section.bg { padding: 10% 0;}
  .stdBx { margin:0 auto; }
  .stdBx:not(:first-of-type) { margin-top: 12%;}
  .stdBx.min { width:80%; }
  .stdBx img { max-width:100%; }
  .clm2 li, .clm2 .clms, .clm3 li, .clm3 .clms, .clm4 li, .clm4 .clms, .clm5 li, .clm5 .clms { width:100%; margin-bottom:0; }
  .clm5 .empty{ display:none;}
  .textC { padding:0 1em; }
  .stdBx__half { flex-direction: column; justify-content: center;}
  .stdBx__half dd { margin-top: 10%;}
  
}
@media(max-width:320px) {
  .stdBx.min { width:90%; }
}

/*------------------------------------------------------------
	COMMON
------------------------------------------------------------ */
section > h2 { line-height: 1.4; letter-spacing: 4px; color: var(--main); text-align: center; margin: 0 0 1.8em;}
section > h2 span {display: block; font-family: "Oswald", sans-serif; margin-bottom: .3em; line-height: 1; font-size: calc(1em - 10px); letter-spacing: 2px;}

section > h2.midT span { position: relative; display: inline-block; font-size: inherit; font-weight: 600;}
section > h2.midT span::before,
section > h2.midT span::after { position: absolute; content: ""; width: 60px; height: 1px; background: var(--main); top: 50%;}
section > h2.midT span::before { left: -2.6em;}
section > h2.midT span::after { right: -2.6em;}

@media(max-width:767px) {
  section > h2.midT span::before,
  section > h2.midT span::after { width: 2em;}
  section > h2.midT span::before { left: -2.4em;}
  section > h2.midT span::after { right: -2.4em;}
}


/*------------------------------------------------------------
	TOP
------------------------------------------------------------ */
/* main */
.splide__pagination { margin-top: 2.5%;}
.splide__pagination li { margin: 0 .5em;}
.splide__pagination li button { background: var(--gray); border-radius: 50px; width:25px; height: 10px; transition: all .2s ease-in-out; cursor: pointer;}
.splide__pagination li button:hover { background: #999;}
.splide__pagination li button.is-active { background: var(--main); width: 40px;}

.splideMv .splide__slide { position: relative; height: 75vh;}
.splideMv .splide__slide img { width: 100%;}
.splideMv .splide__slide h3 { position: absolute; left: 8%; top: 10%; writing-mode: vertical-rl; letter-spacing: 3px; font-size: 2vw; z-index: 1;}
.splideMv .splide__slide h3 br:nth-of-type(1) { padding-top: 1em; display: block;}
.splideMv .splide__slide h3 br:nth-of-type(2) { padding-top: 1em; display: block;}

.splideMv .splide__slide:nth-of-type(2) h3 { top: 14%; right: 10%;}
.splideMv .splide__slide:nth-of-type(3) h3 { top: 14%; right: 10%;}



@media(min-width:1300px) {
  .splideMv .splide__slide h3 { font-size: 30px;}
}
@media(max-width:767px) {
  /* SPLIDE */
  .splideMv .splide__slide { height: 38vh;}
  .splideMv .splide__slide img { width: 100%; height: 100%; object-fit: cover;}
  .splideMv .splide__slide h3 { color: #111; top: 8%; font-size: 3.2vw; text-shadow: 1px 1px 0 #fff;}      
  .splide__pagination { margin-top: 5%;}
  .splide__pagination li button { width: 5vw;}
  .splide__pagination li button.is-active { width: 9vw;}

  .splideMv .splide__slide:nth-of-type(2) h3 { top: 12%; right: inherit; left: 12%;}
  .splideMv .splide__slide:nth-of-type(3) h3 { top: 38%; right: 8%;}
}

/* read */
#read .stdBx { width: 90%; max-width: 90%; margin-left: calc(50% - 50vw);}
#read dt { width: 38%;}
#read dd { width: 52%;}
#read dt img { width: 100%; height: 100%; object-fit: cover;}
#read h3 { line-height: 2;}
#read p { font-size: 17px; line-height: 2.6; margin-top: 2.2em;}
#read .btns { text-align: left;}

@media(max-width:767px) {
  #read .stdBx { width: 88%; max-width: 88%; margin: 0 auto;}
  #read dt,
  #read dd { width: 100%;}
  #read dt img { width: 100%; height: 100%; object-fit: cover;}
  #read h3 { line-height: 2;}
  #read p { font-size: 1.5rem; line-height: 2; margin-top: 1.5em;}
  #read .btns { text-align: center;}
}


/* midmenu */
#midmenu ul { display: flex; justify-content: space-between;}
#midmenu li { width: 22%; overflow: hidden;}
#midmenu li a { display: block; position: relative; width: 100%; height: 550px;}
#midmenu li a::before { position: absolute; content: ""; top: 0; display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 100%; background-repeat: no-repeat; transition: all .3s ease-out; border-radius: 14px;}
#midmenu a::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: url(images/common/arrow.svg) 56% 50% no-repeat #fff; background-size: 26%; z-index: 2;}
#midmenu li:nth-child(1) a::before { background-image: url(images/top/midmenu01.jpg);}
#midmenu li:nth-child(2) a::before { background-image: url(images/top/midmenu02.jpg);}
#midmenu li:nth-child(3) a::before { background-image: url(images/top/midmenu03.jpg);}
#midmenu li:nth-child(4) a::before { background-image: url(images/top/midmenu04.jpg);}
#midmenu li h4 { color: #fff; writing-mode: vertical-rl; margin: 0 auto; padding: 1.5em 0 0; text-shadow: 0 0 16px rgba(0,0,0,.6); letter-spacing: 2px; position: relative; z-index: 2;}
#midmenu li a:hover::before {transform: scale(1.1, 1.1); filter: brightness(65%);}

@media(max-width:767px) {
  #midmenu ul { flex-wrap: wrap;}
  #midmenu li { width: 46%;}
  #midmenu li:nth-child(n+3) { margin-top: 8%;}
  #midmenu li a { height: 48vh;}
  #midmenu li a::before { position: absolute; content: ""; top: 0; display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 100%; background-repeat: no-repeat; transition: all .3s ease-out; border-radius: 14px;}
  #midmenu a::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: url(images/common/arrow.svg) 56% 50% no-repeat #fff; background-size: 26%; z-index: 2;}
  #midmenu li:nth-child(1) a::before { background-image: url(images/top/midmenu01.jpg);}
  #midmenu li:nth-child(2) a::before { background-image: url(images/top/midmenu02.jpg);}
  #midmenu li:nth-child(3) a::before { background-image: url(images/top/midmenu03.jpg);}
  #midmenu li:nth-child(4) a::before { background-image: url(images/top/midmenu04.jpg);}
  #midmenu li h4 { color: #fff; writing-mode: vertical-rl; margin: 0 auto; padding: 1.5em 0 0; text-shadow: 0 0 16px rgba(0,0,0,.6); letter-spacing: 2px; position: relative; z-index: 2;}
  #midmenu li a:hover::before {transform: scale(1.1, 1.1); filter: brightness(65%);}
}

/* rooms splide */
.splide.rooms { margin-top: 8%; overflow: hidden;}
.splide.rooms .splide__slide img {
  opacity: .6;
  transform: scale(.7);
  transition: .7s;
  transform-origin: center;
  border: 1px solid #e0e0e0;
}
.splide.rooms .splide__slide div {
  opacity: 0;
  transition: .5s;
}
.splide.rooms .splide__slide.is-active img {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.splide.rooms .splide__slide.is-active div {
  opacity: 1;
}
.splide.rooms .splide__slide img {
  height: auto;
  width: 100%;
}
.splide.rooms .splide__track {
  /* overflow: hidden; */
  position: relative;
  z-index: 0;
  width: calc(100vw + 30vw);
  margin-left: -15vw;
}
.splide.rooms .splide__arrows {
  display: flex;
  justify-content: center;
  width: 1120px;
  max-width: 80%;
  margin: 3% auto 0;
}
.splide.rooms .splide__arrows button {
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.splide.rooms .splide__arrows button:hover {
  opacity: .7;
}
.splide.rooms .splide__arrow--next {
  margin-left: 1.2em;
}

@media(max-width:767px) {
  /* splide */
  .splide.rooms { margin-top: 12%;}
  .splide.rooms .splide__track {
    width: calc(100vw + 80vw);
    margin-left: -40vw;
  }
  .splide.rooms .splide__slide img {
    transform: scale(.75);
  }
  .splide.rooms .splide__slide div {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 20%;
    display: none;
  }
  .splide.rooms .splide__slide.is-active img {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
  }
  .splide.rooms .splide__slide.is-active h4,
  .splide.rooms .splide__slide.is-active p {
    width: 100%;
  }
  .splide.rooms .splide__slide.is-active div {
    display: block;
  }
  .splide.rooms .splide__slide img {
    height: auto;
    width: 100%;
  }
  .splide.rooms .splide__arrows {
    width: 88%;
    max-width: 88%;
  }
  .splide.rooms .splide__arrows img {
    width: 60%;
  }
  .splide.rooms .splide__arrow--prev,
  .splide.rooms .splide__arrow--next {
    margin: 0;
    padding: 0;
  }
}


/* TOP NEWS */
#news-top ul { display: flex; justify-content: space-between;}
#news-top li { position: relative; width: 31%;}
#news-top li dd { padding: 1.8em 2em 2em;}
#news-top li dd p { margin: .7em 0 0;}
#news-top li .date { margin: 2.5em 0 0; color: var(--main); line-height: 1.3; font-weight: 500; font-family: "Oswald", sans-serif;}
#news-top li a { display: block; background: #fff; height: 100%;}
#news-top li a:hover { box-shadow: 4px 4px 0 rgba(79, 23, 127, .5); transform: translate(-4px,-4px);}
#news-top li a::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: url(images/common/arrow_wt.svg) 56% 50% no-repeat rgba(79, 23, 127, 1); background-size: 26%; z-index: 2;}
#news-top li a:hover img { opacity: 1;}
#news-top li .date span { display: inline-block; color: var(--main); border-left: 4px solid var(--main); padding-left: .8em; line-height: 1.5; font-weight: 600; font-size: calc(1em - 1px);}
#news-top li .date span:not(:first-of-type) { margin: 0 0 0 1.5em;}

@media(max-width:767px) {
  #news-top ul { flex-direction: column; justify-content: flex-start;}
  #news-top li { width: 100%;}
  #news-top li:not(:first-of-type) { margin-top: 6%;}
  #news-top li dl { width: 100%; display: flex; justify-content: space-between;}
  #news-top li dt { width: 42%;}
  #news-top li dt img { width: 100%; height: 100%; object-fit: cover;}
  #news-top li dd { width: 58%; padding: 1.3em 1.5em 1.5em;}
  #news-top li dd h6 { font-size: 1.5rem;}
  #news-top li dd p { font-size: 1.3rem;}
  #news-top li .date { margin-top: 2em;}
  #news-top li .date span { display: block;}
  #news-top li .date span:not(:first-of-type) { margin: 1em 0 0;}
  #news-top li a::after { width: 24px; height: 24px;}

}



/*------------------------------------------------------------
	ABOUT
------------------------------------------------------------ */
.pghd { margin-top: 0!important; height: 300px; display: flex; align-items: center; justify-content: center;}
.pghd > h2 { margin: 0; text-align: center; line-height: 1; color: #111; letter-spacing: 4px;}

/* ct01 */
.about .pghd { background: url(images/about/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.about .ct01 h3 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
.about .ct01 p { line-height: 2;}
.about .ct01 dl { display: flex; align-items: center; justify-content: space-between;}
.about .ct01 .rev { flex-direction: row-reverse; margin-top: 8%;}
.about .ct01 .ab-rd01 dt { width: 64%;}
.about .ct01 .ab-rd01 dd { width: 30%;}

.about .ct01 .ab-rd02 dl { align-items: flex-start;}
.about .ct01 .ab-rd02 dt { width: 47%;}
.about .ct01 .ab-rd02 dd { width: 46%; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.about .ct01 .ab-rd02 dd div { width: 46%;}
.about .ct01 .ab-rd02 dd div:last-of-type { width: 100%; margin-top: 8%;}
.about .ct01 .ab-rd02 dd div p { text-align: center; margin-top: .8em;}

.about .ct01 .ab-rd03 dl { align-items: flex-start;}
.about .ct01 .ab-rd03 dt { width: 47%;}
.about .ct01 .ab-rd03 dd { width: 46%; padding-top: 6em; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.about .ct01 .ab-rd03 dd div { width: 46%;}
.about .ct01 .ab-rd03 dd div:nth-of-type(n+3) {margin-top: 8%;}
.about .ct01 .ab-rd03 dd div p { text-align: center; margin-top: .8em;}

/* ct02 */
.about .ct02 ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.about .ct02 li { width: 47%; border-radius: 14px; background: #fff; padding: 2em 2.5em;}
.about .ct02 li:nth-of-type(n+3) {margin-top: 6%;}
.about .ct02 li h3 { text-align: center;}
.about .ct02 li img { margin: 1.6em 0 2em;}

/* ct03 */
.about .ct03 dl { align-items: center; justify-content: center;}
.about .ct03 dt { width: auto; margin-right: 5%;}
.about .ct03 dd { width: 45%;}
.about .ct03 dt h3:not(:first-of-type) { margin-top: .5em;}
.about .ct03 dd img { border-radius: 14px;}

@media(max-width:767px) {
  .pghd { height: 18vh; }
  
  /* ct01 */
  .about .ct01 h3 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
  .about .ct01 p { line-height: 2;}
  .about .ct01 dl { flex-direction: column;}
  .about .ct01 .rev { flex-direction: column; margin-top: 8%;}
  .about .ct01 .ab-rd01 dt { width: 100%;}
  .about .ct01 .ab-rd01 dd { width: 100%; margin-top: 8%;}
  
  .about .ct01 .ab-rd02 dt { width: 100%;}
  .about .ct01 .ab-rd02 dd { width: 100%; margin-top: 8%;}
  
  .about .ct01 .ab-rd03 dt { width: 100%;}
  .about .ct01 .ab-rd03 dd { width: 100%; padding-top: 8%;}
  
  /* ct02 */
  .about .ct02 ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
  .about .ct02 li { width: 100%; padding: 2em 2.5em;}
  .about .ct02 li:nth-of-type(n+2),
  .about .ct02 li:nth-of-type(n+3) {margin-top: 6%;}
  .about .ct02 li h3 { margin: 0;}
  .about .ct02 li img { margin: 1.4em auto; width: 100%;}
  
  /* ct03 */
  .about .ct03 dl { align-items: center; justify-content: center;}
  .about .ct03 dt { width: 80%; margin: 0;}
  .about .ct03 dd { width: 80%;}
  .about .ct03 dt h3:not(:first-of-type) { margin-top: .5em;}
  .about .ct03 dd img { border-radius: 14px;}
    
}


/*------------------------------------------------------------
	BEGINNERS
------------------------------------------------------------ */
.beginners .pghd { background: url(images/beginners/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.beginners .pghd h2 { line-height: 1.6;}

/* ct01 */
.beginners .ct01 .btns { margin: 0;}
.beginners .ct01 .btns a { margin: 0 1em;}
.beginners .ct01 dl:nth-of-type(even) { flex-direction: row-reverse;}
.beginners .ct01 dl:not(:first-of-type) { margin-top: 12%;}
.beginners .ct01 dl h3 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
.beginners .ct01 dl p { line-height: 2;}
.beginners .ct01 dt,
.beginners .ct01 dd { width: 47%;}

/* ct02 */
.beginners .ct02 ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.beginners .ct02 li { width: 47%; border-radius: 14px; background: #fff; padding: 2em 2.5em;}
.beginners .ct02 li:nth-of-type(n+3) {margin-top: 6%;}
.beginners .ct02 li h3 { text-align: center;}
.beginners .ct02 li img { margin: 1.6em 0 2em;}
.beginners .ct02 li h3 { text-align: left; line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
.beginners .ct02 li h3 span { font-size: calc(1em - 8px); display: inline-block; margin-left: .4em;}
.beginners .ct02 li div { display: flex; align-items: flex-start; justify-content: space-between;}
.beginners .ct02 li div img { width: 50%; margin: 0; border: 1px solid #e0e0e0;}
.beginners .ct02 li div p { width: 44%; line-height: 1.7;}

/* ct03 */
.beginners .ct03 .stdBx { border: 1px solid var(--main); padding: 3.5em 5em;}
.beginners .ct03 h5 { color: var(--main);}
.beginners .ct03 h5 span { font-size: calc(1em - 6px); color: #333; font-weight: 400;}
.beginners .ct03 .stdBx > div { display: flex; align-items: flex-start; justify-content: flex-start; margin: .5em 0 0;}
.beginners .ct03 hr { border-color: var(--main);}
.beginners .ct03 p:first-of-type { margin: .6em 0 .4em;}

/* ct04 */
.beginners .ct04 { padding-top: 6%;}
.beginners .ct04 dl h3 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
.beginners .ct04 .stdBx { width: 90%; max-width: 90%; margin-right: calc(50% - 50vw);}
.beginners .ct04 dl { align-items: flex-start;}
.beginners .ct04 dt { width: 40%; padding-top: 2%;}
.beginners .ct04 dd { width: 54%;}
.beginners .ct04 dd img { width: 100%; height: 100%; object-fit: cover;}
.beginners .ct04 dt div { border: 1px solid #999; margin-top: 3em; padding: 2em 3em 2.5em;}
.beginners .ct04 dt div h6 { margin-bottom: .3em;}
.beginners .ct04 dt div h6:not(:first-of-type) { margin-top: 1.5em;}

/* ct05 */

.beginners .ct05 li { display: flex; align-items: flex-start; justify-content: space-between; border-radius: 14px; background: #fff; padding: 2.4em 2.5em 2.6em;}
.beginners .ct05 li:not(:first-of-type) { margin-top: 6%;}
.beginners .ct05 li > img { width: 40%; margin: 0;}
.beginners .ct05 li > div { width: 54%; padding-top: .5em;}
.beginners .ct05 li h3 { line-height: 1.4; margin-bottom: 1em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}
.beginners .ct05 li h3:not(:first-of-type) { margin-top: 1.6em;}
.beginners .ct05 li h3 span { display: inline-block; font-size: calc(1em - 4px)}
.beginners .ct05 li:last-child { flex-wrap: wrap;}
.beginners .ct05 li:last-child > img,
.beginners .ct05 li:last-child > div { width: 100%; display: flex; align-items: flex-start;}
.beginners .ct05 li:last-child > div div { width: auto;}
.beginners .ct05 li:last-child h3 { font-size: 2vw;}
.beginners .ct05 li:last-child h3 span { display: block;}
.beginners .ct05 li:last-child > div { margin-top: 3%;}
.beginners .ct05 li:last-child > div > h3 { width: 31%;}
.beginners .ct05 li:last-child > div > div h3 { margin-bottom: .6em;}
.beginners .ct05 li:last-child p { text-align: right;}
.beginners #contact-box { margin-top: 0; border-top: 1px solid #fff;}

@media(min-width:1100px) {
  .beginners .ct05 li:last-child h3 { font-size: 21px;}
}
@media(max-width:767px) {
  .beginners .pghd { background-position: 25% 50%;}
  
  /* ct01 */
  .beginners .ct01 .btns { margin: 0;}
  .beginners .ct01 .btns a { margin: 0 0 1.4em;}
  .beginners .ct01 dl:nth-of-type(even) { flex-direction: column;}
  .beginners .ct01 dl:not(:first-of-type) { margin-top: 15%;}
  .beginners .ct01 dt,
  .beginners .ct01 dd { width: 100%;}
  
  /* ct02 */
  .beginners .ct02 ul { flex-direction: column;}
  .beginners .ct02 li { width: 100%;}
  .beginners .ct02 li:nth-of-type(n+2),
  .beginners .ct02 li:nth-of-type(n+3) {margin-top: 8%;}
  .beginners .ct02 li h3 { text-align: left;}
  .beginners .ct02 li div { flex-direction: column-reverse;}
  .beginners .ct02 li div img { width: 100%; margin: 0 0 1.4em;}
  .beginners .ct02 li div p { width: 100%;}
  
  /* ct03 */
  .beginners .ct03 .stdBx { width: 88%; padding: 2em 2.5em;}
  .beginners .ct03 h5 span { font-size: calc(1em - 4px);}
  .beginners .ct03 .stdBx > div { flex-direction: column; margin: .5em 0 0;}
  .beginners .ct03 .stdBx > div h5:last-of-type { padding-left: 2em;}
  
  /* ct04 */
  .beginners .ct04 { padding-top: 8%;}
  .beginners .ct04 .stdBx { width: 88%; max-width: 88%; margin: 0 auto;}
  .beginners .ct04 dt { width: 100%; padding-top: 0;}
  .beginners .ct04 dd { width: 100%;}
  .beginners .ct04 dt div { margin-top: 8%; padding: 1.5em 2em 2em;}
  
  /* ct05 */
  .beginners .ct05 li { flex-direction: column; padding: 2em 1.9em 2.2em;}
  .beginners .ct05 li:not(:first-of-type) { margin-top: 8%;}
  .beginners .ct05 li > img { width: 100%; margin: 0;}
  .beginners .ct05 li > div { width: 100%; margin-top: 2em; padding-top: 0;}
  .beginners .ct05 li h3 span { font-size: calc(1em - 8px)}
  .beginners .ct05 li:last-child { flex-wrap: wrap;}
  .beginners .ct05 li:last-child > img,
  .beginners .ct05 li:last-child > div { width: 100%; flex-direction: column;}
  .beginners .ct05 li:last-child > div div { width: 100%;}
  .beginners .ct05 li:last-child h3 { font-size: 4.7vw;}
  .beginners .ct05 li:last-child > div { margin-top: 2em;}
  .beginners .ct05 li:last-child > div > h3 { width: 100%;}
  .beginners .ct05 li:last-child > div > div h3 { margin-bottom: .6em;}
  .beginners .ct05 li:last-child p { text-align: right;}
    
}


/*------------------------------------------------------------
	CONTACT
------------------------------------------------------------ */
.contact-thanks .pghd,
.contact .pghd { position: relative; background: url(images/top/contact_bg.jpg) 50% 50% no-repeat; background-size: cover;}
.contact-thanks .pghd::before,
.contact .pghd::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(235,241,242,.8);}
.contact-thanks .pghd h2,
.contact .pghd h2 { position: relative; z-index: 1;}

/* access */
.access { margin-top: 0!important; border-top: 1px solid #fff;}
.access dl.stdBx__half { align-items: stretch;}
.access dt,
.access dd { border-radius: 14px; background: #fff; padding: 2.4em 2.5em 2.6em;}
.access dt { width: 39%;}
.access dd { width: 55%; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.access dt img { margin: 1.6em 0 0;}
.access dt p span { font-weight: 600;}
.access dd div { width: 46%;}
.access dd img { width: 50%;}
.access dd iframe { width: 100%; margin-top: 1.5em;}
.access h3 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}

/* contact */
#form .stdBx table { display: block; background: var(--bg); padding: 6% 8%;}
#form th, #form td { padding: 2em 1em; text-align: left;}
#form th { width: 37%; font-weight: 600;}
#form td { width: 60%; padding-left: 5%; }
#form .names td div { display: flex; justify-content: space-between;}
#form .names td article { width: 48%;}
#form td > span { display: block; margin-bottom: .5em;}
#form th strong, .agree-check strong { display: inline-block; background: #e91539; color: #fff; font-weight: 500; line-height: 1; font-size: calc(1em - 2px); margin-right: .8em; border-radius: 9999px;; padding: .2em .6em .35em;}
.agree-check strong { margin: 0;}
#form th article { display: flex; align-items: flex-start;}
#form td div { position: relative;}

.contact-thanks #form p { margin: 2em 0;}
.contact-thanks #form .btns a span { background: none; padding: .8em 1em 1em;}

#form tr:nth-child(1),
#form tr:nth-child(6) { vertical-align: top;}

@media(min-width:1300px) {
    .contact-thanks #form .btns a { font-size: 18px; font-weight: 500;}
}
@media(max-width:767px) {
  .access dt,
  .access dd { border-radius: 14px; background: #fff; padding: 2.4em 2.5em 2.6em;}
  .access dt { width: 100%;}
  .access dd { width: 100%;}
  .access dd div { width: 100%;}
  .access dd img { width: 100%; margin-top: 1.5em;}
  
  #form th, #form td { display: block; width: 100%; padding: 1.8em 0 1.2em;}
  #form td { padding: 0 0 1.8em;}
  #form tr.bod td { border-top: 0;}
}



/*------------------------------------------------------------
	FAQ
------------------------------------------------------------ */
.faq .pghd { background: url(images/faq/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.faq .pghd h2 { color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.9);}

.faqlist > h2 { margin-bottom: .6em;}
.faqlist > p {text-align: center;}
.faqlist li { margin-top: 6%; padding: 4% 6%; background: var(--bg);}
.faqlist li h5 { color: var(--main); margin-bottom: 1em; display: flex; align-items: flex-start;}
.faqlist li h5 span { display: inline-block; border-right: 1px solid var(--main); padding-right: .7em; margin-right: .7em; font-size: calc(1em + 12px);}
.faqlist li p { padding-left: 2.6em;}
.faqlist li p a { text-decoration: underline; color: var(--txtlink);}
.faqlist li p a:hover { text-decoration: none;}

@media(max-width:767px) {
  .faqlist li { margin-top: 8%; padding: 6% 8%;}
  .faqlist li p { padding-left: 0;}
}


/* xxx */
.ct0 {}
@media(max-width:767px) {
}


/*------------------------------------------------------------
	POST
------------------------------------------------------------ */
.postlist__lists li { position: relative; width: 100%;}
.postlist__lists li:not(:first-of-type) { margin-top: 6%;} 
.postlist__lists li a { display: block; background: var(--bg);}
.postlist__lists li a:hover { box-shadow: 4px 4px 0 rgba(79, 23, 127, .5); transform: translate(-4px,-4px);}
.postlist__lists li a::after { content: ""; position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: url(images/common/arrow_wt.svg) 56% 50% no-repeat rgba(79, 23, 127, 1); background-size: 26%; z-index: 2;}
.postlist__lists li a:hover img { opacity: 1;}
.postlist__lists li dl { width: 100%; display: flex; justify-content: space-between;}
.postlist__lists li dt { width: 42%;}
.postlist__lists li dt img { width: 100%; height: 100%; object-fit: cover;}
.postlist__lists li dd { width: 58%; padding: 2.3em 2.5em 2.5em;}
.postlist__lists li h6 { margin-bottom: .5em; color: #222;}

.postlist__lists li .date { margin-top: 2em;}
.postlist__lists li .date span { display: inline-block; color: var(--main); border-left: 4px solid var(--main); padding-left: .8em; line-height: 1.5; font-weight: 600; font-size: calc(1em - 1px);}
.postlist__lists li .date span:not(:first-of-type) { margin: 0 0 0 1.5em;}

.cat_title { text-align: center; color: var(--main); margin-bottom: 2.5em;}

.postWrap,
.uds { margin-top: 6%!important;}

.widget-area aside:nth-of-type(n+4) h3 { background-color: var(--sub);}
.widget-area aside:nth-of-type(n+4) li { border-color: var(--sub);}
.widget-area aside:nth-of-type(n+4) li a::after { color: var(--sub);}

/* txtPost */
.postlist__lists .txtPost { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10%;}
.category-text_news .postlist__lists ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.category-text_news .postlist__lists li div,
.postlist__lists .txtPost li div { padding: 2.3em 2.5em 2.5em;}
.category-text_news .postlist__lists li,
.postlist__lists .txtPost li { position: relative; width: 48%;}
.category-text_news .postlist__lists li:not(:first-of-type),
.postlist__lists .txtPost li:not(:first-of-type) { margin-top:0;} 
.category-text_news .postlist__lists li:nth-child(n+3),
.postlist__lists .txtPost li:nth-child(n+3) { margin-top: 4%;}

.category-text_news .postlist__lists dt,
.archive .postlist__lists .text_news dt { display: none;}
.category-text_news .postlist__lists dd,
.archive .postlist__lists .text_news dd { width: 100%; }

.archive .pghd h2 { line-height: 1.4; }

.archive .cat_title { display: none;}
.archive.date .cat_title { display: block;}

/* single */
.single h1 { line-height: 1.2; margin-bottom: 1.2em; padding: .6em 0 0 1em; border-left: 4px solid var(--main);}


@media(max-width:767px) {
  .postlist__lists li .date span { display: block; width: 90%;}
  .postlist__lists li a::after { width: 24px; height: 24px;}
  .postlist__lists li .date span:not(:first-of-type) { margin: 1em 0 0;}
  .postlist__lists li dd { width: 58%; padding: 1.3em 1.5em 1.5em;}
  .postlist__lists li dd p { font-size: 1.3rem;}
  .postWrap,
  .uds { margin-top: 10%!important;}

  /* txtPost */
  .postlist__lists .txtPost { margin-top: 12%;}
  .category-text_news .postlist__lists li div,
  .postlist__lists .txtPost li div { padding: 1.3em 1.5em 1.5em;}
  .category-text_news .postlist__lists li,
  .postlist__lists .txtPost li { width: 80%; margin: 0 auto;}
  .category-text_news .postlist__lists li:nth-child(n+3),
  .postlist__lists .txtPost li:nth-child(n+3) { margin-top: 0;}
  .category-text_news .postlist__lists li:not(:first-of-type),
  .postlist__lists .txtPost li:not(:first-of-type) { margin-top: 6%;} 

}


/* news */
.news .pghd,
.archive .pghd { background: url(images/news/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.pghd.post-news { background: url(images/news/headimg.jpg) 0 50% no-repeat; background-size: cover;}
@media(max-width:767px) {
}

/* hanaten */
.post-type-archive-hanaten .pghd,
.tax-hanaten_category .pghd,
.pghd.post-hanaten { background: url(images/hanaten/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.post-type-archive-hanaten .pghd::before,
.tax-hanaten_category .pghd::before,
.pghd.post-hanaten::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(235,241,242,.6);}
.post-type-archive-hanaten .pghd h2,
.tax-hanaten_category .pghd h2,
.pghd.post-hanaten h2 { position: relative; z-index: 1;}

@media(max-width:767px) {
}

/* column */
.post-type-archive-column .pghd,
.tax-column_category .pghd,
.pghd.post-column { background: url(images/column/headimg.jpg) 0 50% no-repeat; background-size: cover;}
.post-type-archive-column .pghd::before,
.tax-column_category .pghd::before,
.pghd.post-column::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(235,241,242,.6);}
.post-type-archive-column .pghd h2,
.tax-column_category h2,
.pghd.post-column h2 { position: relative; z-index: 1;}

@media(max-width:767px) {
}


/* xxx */
.ct0 {}
@media(max-width:767px) {
}





/*------------------------------------------------------------
	footer
------------------------------------------------------------ */
#contact-box { background: url(images/top/contact_bg.jpg) 50% 50% no-repeat; background-size: cover; margin-top: 12%;}
#contact-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(235,241,242,.8);}
#contact-box h2,
#contact-box div { position: relative; z-index: 1;}
#contact-box h6 { text-align: center; font-weight: 500;}
#contact-box .btns { margin-top: 6%;}
#contact-box .btns a { background-color: rgba(255,255,255,.5);}

footer { position:relative; margin:0; padding:4% 0 3%; background:#222;}
footer img { display:block; margin:0 auto 2%; width:240px; }
footer p { color:#fff; text-align:center; margin:0; letter-spacing:1px; font-size:14px;}
footer .menu { display:flex; justify-content:center; margin: 3% 0;}
footer .menu a { display: inline-block; margin: 0 1em; color: #fff; font-weight: 500;}
footer .menu a:hover { opacity: .4;}

footer article { display:flex; justify-content:center; margin: 0 0 2.5%;}
footer article a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: #fff; border-radius: 50%; margin: 0 1em;}
footer article a img { width: 50%;}
footer article a:hover { background: #999;}
footer article a:hover img { opacity: 1;}


.pagetop a { position:fixed; right:2%; bottom:4%!important; background: rgba(79, 23, 127,.6); padding:0; z-index:9900; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff;}
.pagetop a i { margin-top: -.2em;}
.pagetop a:hover { height: 50px; color: #fff; background: rgba(79, 23, 127,.8);}

@media(max-width:767px) {
  #contact-box h2 { margin-bottom: 1.2em;}
  #contact-box .btns { margin-top: 10%;}
  footer { padding:8% 0 6%;}
  footer img { margin:0 auto 5%; width: 44%;}
  footer p { font-size:1.1rem;}
  footer article { margin: 5% 0;}
  footer .menu { display: none; flex-wrap: wrap; flex-direction: column; align-items: center; }
  footer .menu a:not(:first-of-type) { margin-top: 1em;}
  .pagetop { display: none;}
}