@charset "UTF-8";
/*****************************
  pagecommon
*****************************/
.pagesec{
  padding: 10rem 0 0;
}

.pagesec:last-of-type{
  padding-bottom: 10rem;
}
.pagesec-shot{
  padding: 10rem 0 5rem;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec{
    padding: 6rem 0 0;
  }
  .pagesec:last-of-type{
    padding-bottom: 6rem;
  }
}


/*****************************
  pagecommon
*****************************/
.pagehead,
.couse-pagehead{
  background: linear-gradient( rgba(249, 169, 209 , .3) , rgba(151, 222, 255 , .3));
  position: relative;
  height: 500px;
}
.couse-pagehead {
  background: #B5CEE6;
  padding: 0 4rem;
  /* padding-top: 8rem; */
}
.couse-pagehead.head-child {
  background: #E5BCCE;
}
.pagehead-bg{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  height: 100%;
  width: 65.26%;
}
.pagehead-bg.phcmn{
  background-image: url(../images/head/head_common.webp);
}
.pagehead-ttl{
  background: #fff;
  border-radius: 0 6px 6px 0;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, .06);
  padding: 5rem 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 55%;
}
.pagehead-ttl .ttlbox{
  margin-left: 30%;
}
.pagehead-ttl .ttl,
.cpheadttl .ttl{
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.2;
}
.pagehead-ttl .ttlen,
.cpheadttl .ttlen{
  color: #7EB0E3;
  font-size: 1.8rem;
  font-family: "Roboto", serif;
}
.couse-pagehead .inner2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.couse-pagehead .inner2::before{
  content: "";
  opacity: .3;
  position: absolute;
  right: 0;
  bottom: -10%;
  width: 30%;
}
.couse-pagehead.head-french-and-italian .inner2::before{
  aspect-ratio: 395/387;
  background: url(../images/head/head_french_italian.svg) no-repeat center / contain;
}
.couse-pagehead.head-japanese .inner2::before{
  aspect-ratio: 455/306;
  background: url(../images/head/head_japanese.svg) no-repeat center / contain;
}
.couse-pagehead.head-chinese .inner2::before{
  aspect-ratio: 379/321;
  background: url(../images/head/head_chinese.svg) no-repeat center / contain;
  width: 25%;
}
.couse-pagehead.head-child .inner2::before{
  aspect-ratio: 413/332;
  background: url(../images/head/head_child.svg) no-repeat center / contain;
}
.couse-pagehead .inner2 .cphmain{
  width: 100%;
}
.cpheadttl{
  width: 35%;
}
.cpheadttl ul{
  gap: 1rem;
  margin-bottom: 1rem;
}
.cpheadttl li{
  background: #fff;
  border-radius: 50px;
  color: #7EB0E3;
  font-weight: bold;
  padding: .5rem 2rem;
}
.cpheadttl li:last-of-type{
  background: #7EB0E3;
  color: #fff;
}
.head-child .cpheadttl li,
.head-child .cpheadttl .ttlen{
  color: #E37EB7;
}
.head-child .cpheadttl li:last-of-type{
  background: #E37EB7;
  color: #fff;
}
.cpheadttl .ttl{
  color: #fff;
}
.cpheadtxt{
  margin-top: 4rem;
  padding: 0 5%;
  width: 65%;
}
.cpheadtxt p{
  color: #fff;
  font-size: 2rem;
  font-weight: 500;
}

.cmn-breadcrumb{
  background: #F7F4F1;
  padding: .5rem 0;
}

/* 202604newcss */
.pagehead-couse .mainbg{
  position: relative;
  width: 100%;
}
.pagehead-couse .mainbg .bg{
  aspect-ratio: 83/60;
  /* background-image 各cssで設定 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 64%;
}
.pagehead-couse .mainbg .bg1{
  position: absolute;
  top: 0;
  right: -28%;
  transform: scale(-1, 1);
}
.pagehead-couse .mainbg .bg2{
  left: 0;
}
.pagehead-couse .mainbg .catch{
  position: absolute;
  /* その他各cssで設定 */
}
.pagehead-couse .mainbg .catch picture{
  display: block;
}
.pagehead-couse .mainbg .catch img{
  filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 4px #fff) drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 6px #fff);
  padding: 2rem 1.5rem;
  width: 100%;
}
.pagehead-couse .imgsquare{
  aspect-ratio: 14/13;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  right: 0;
  bottom: 130px;
  height: calc(100% - 205px);
}
.pagehead-couse .imgsquare li{
  aspect-ratio: 14/13;
  /* background-image 各cssで設定 */
  width: 50%;
}
.pagehead-couse .ttl{
  background: #008dd3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: bold;
  gap: 1rem;
  letter-spacing: 3px;
  height: 130px;
  width: 100%;
}
.pagehead-couse .ttl > span{
  font-size: 5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media only screen and (max-width: 1180px) {
  .couse-pagehead{
    padding: 0;
  }
  .pagehead-couse .imgsquare{
    bottom: 120px;
    height: calc(100% - 195px);
  }
  .pagehead-couse .ttl {
    height: 120px;
  }
  .pagehead-couse .ttl span{
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1179px) {
  .pagehead-couse .imgsquare{
    height: calc(100% - 192px);
  }
}
@media only screen and (max-width: 1024px) {
  .pagehead-ttl .ttlbox {
    margin-left: 5rem;
  }
  .pagehead-ttl .ttl,
  .cpheadttl .ttl {
    font-size: 3rem;
  }
  .cmn-breadcrumb ,
  .cmn-breadcrumb a,
  .cmn-breadcrumb span{
    font-size: 1.4rem;
  }

  .couse-pagehead{
    height: 400px;
  }
  .couse-pagehead .inner2 .cphmain {
    padding-top: 4rem;
  }
  .cpheadtxt {
    padding: 0 5% 0 2%;
  }
  .cpheadtxt p {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 1023px) {
  .couse-pagehead{
    height: auto;
  }
  .couse-pagehead .inner2{
    display: block;
  }
  .couse-pagehead .inner2 .cphmain {
    padding: 12rem 0 5rem;
  }
  .cpheadttl,
  .cpheadtxt {
    width: 100%;
  }
  .cpheadttl .ttl br{
    display: none;
  }
  .cpheadttl li {
    font-size: 1.4rem;
    padding: .3rem 1.8rem;
  }
  .cpheadtxt{
    margin-top: 1rem;
    padding: 0 3rem 0 0;
  }
  .cpheadtxt p {
    font-size: 1.6rem;
  }

  /* 202604newcss */
  .pagehead-couse .ttl {
    font-size: 1.8rem;
  }
  .pagehead-couse .ttl span {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 820px) {
  .pagehead{
    height: 400px;
  }
  .pagehead-ttl{
    padding: 3rem 0;
  }
  .pagehead-ttl .ttl,
  .cpheadttl .ttl {
    font-size: 2.4rem;
  }
  .couse-pagehead .inner2::before{
    bottom: -5%;
    width: 40%;
  }
  .couse-pagehead.head-chinese .inner2::before{
    width: 35%;
  }
  .couse-pagehead.head-child .inner2::before{
    width: 45%;
  }

  /* 202604newcss */
  .pagehead-couse .mainbg .bg {
    aspect-ratio: 4/3;
    width: 100%;
  }
  .pagehead-couse .mainbg .bg1{
    display: none;
  }
  .pagehead-couse .mainbg .catch img{
    filter: drop-shadow(0px 0px 5px #fff) drop-shadow(0px 0px 6px #fff) drop-shadow(0px 0px 7px #fff);
    padding: 2.5rem 2rem;
  }
  .pagehead-couse .imgsquare {
    aspect-ratio: auto;
    order: 3;
    position: static;
    height: auto;
    width: 100%;
  }
  .pagehead-couse .imgsquare li {
    aspect-ratio: 1 / 1;
    width: 25%;
  }
  .pagehead-couse .ttl {
    flex-direction: column;
    line-height: 1;
    padding: 3rem 0;
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagehead {
    height: 350px;
  }
  .pagehead-bg {
    width: 75%;
  }
  .pagehead-ttl {
    min-width: 50%;
    padding: 2.5rem 3rem 2rem 1.5rem;
    width: 85%;
    width: auto;
  }
  .pagehead-ttl .ttlbox {
    margin-left: 0;
  }
  .pagehead-ttl .ttl,
  .cpheadttl .ttl {
    font-size: 2rem;
  }
  .pagehead-ttl .ttlen,
  .cpheadttl .ttlen{
    font-size: 1.6rem;
  }
  .couse-pagehead .inner2 .cphmain {
    padding: 12rem 0 3rem;
  }
  .cpheadtxt{
    padding: 0;
  }

  .couse-pagehead .inner2::before{
    bottom: -5%;
    width: 60%;
  }
  .couse-pagehead.head-chinese .inner2::before{
    width: 55%;
  }
  .couse-pagehead.head-child .inner2::before{
    bottom: 0;
    width: 65%;
  }

  /* 202604newcss */
  .pagehead-couse .mainbg .bg {
    aspect-ratio: 1/1;
  }

  .pagehead-couse .mainbg .catch img {
    padding: 1.5rem 2rem;
  }
  .pagehead-couse .ttl {
    font-weight: 500;
    font-size: 3.8vw;
    letter-spacing: 1px;
  }
  .pagehead-couse .ttl span {
    flex-direction: column;
    font-weight: 500;
    font-size: 10vw;
  }
}

/* 202604newcss */
/*****************************
parts 学科紹介 コースリンク
*****************************/
.parts-courselinks ul{
  gap: 1rem;
}
.parts-courselinks ul li{
  width: calc(100% / 5 - 1rem);
}
.parts-courselinks ul li a{
  border-bottom: 1px solid #004b78;
  flex-direction: column;
  opacity: 1;
  height: 100%;
  transition: .5s;
  text-align: center;
}
.parts-courselinks ul li a .imgbox::before{
  content: "";
  background: #00d296;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s;
  height: 100%;
  width: 100%;
}
.parts-courselinks ul li a .ttl{
  flex-direction: column;
  height: 130px;
  width: 100%;
}
.parts-courselinks ul li a .ttl span{
  font-size: 1.5rem;
  font-weight: 500;
}
.parts-courselinks ul li a .ttl p{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
}
.parts-courselinks ul li a:hover{
  color: #00d296;
}
.parts-courselinks ul li a:hover .imgbox::before{
  opacity: .5;
}
.parts-courselinks .bnr{
  margin-top: 10rem;
  text-align: center;
}
.parts-courselinks .bnr a{
  display: inline-block;
  opacity: 1;
  position: relative;
}
.parts-courselinks .bnr a picture{
  transition: .5s;
}
.parts-courselinks .bnr a .hov{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.parts-courselinks .bnr a:hover picture{
  opacity: 0;
}
.parts-courselinks .bnr a:hover .hov{
  opacity: 1;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 1023px) {
  .parts-courselinks ul {
    gap: 3rem 2rem;
    margin: 0 auto;
    max-width: 700px;
  }
  .parts-courselinks ul li {
    width: calc(100% / 3 - 2rem);
  }
  .parts-courselinks ul li a .ttl {
    height: 110px;
  }
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .parts-courselinks ul {
    gap: 1rem;
  }
  .parts-courselinks ul li{
    width: 100%;
  }
  .parts-courselinks ul li a{
    border: 1px solid #004b78;
    flex-direction: row;
  }
  .parts-courselinks ul li a .imgbox{
    width: 100px;
  }
  .parts-courselinks ul li a .imgbox img{
    aspect-ratio: 1/1;
    height: auto;
    width: 100%;
  }
  .parts-courselinks ul li a .ttl{
    height: auto;
    width: calc(100% - 100px);
  }
  .parts-courselinks ul li a .ttl span {
    font-size: 3.6vw;
  }
  .parts-courselinks ul li a .ttl p {
    font-size: 5.8vw;
  }
  .parts-courselinks .bnr {
    margin-top: 8rem;
  }
}

/*****************************
parts 資格
*****************************/
.qualificationsflex {
  gap: 2rem;
}
.qualificationsflex .fbox{
  border: 3px solid #E6B5B5;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 0 4rem;
  position: relative;
  width: calc(50% - 1rem);
}
.qualificationsflex .fbox:last-of-type{
  border-color: #B5E6D1;
}
.qualificationsflex .fbox .ttl{
  font-size: 2.8rem;
  font-weight: bold;
  position: absolute;
  top: -3rem;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.qualificationsflex .fbox .ttl::before{
  content: "";
  aspect-ratio: 1/1;
  background: #E6B5B5;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 75px;
  z-index: -1;
}
.qualificationsflex .fbox:last-of-type .ttl::before{
  background: #B5E6D1;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .qualificationsflex {
    gap: 7rem;
  }
  .qualificationsflex .fbox {
    padding: 5rem 1.5rem 4rem;
    width: 100%;
  }
  .qualificationsflex .fbox .ttl {
    font-size: 2.2rem;
    top: -2rem;
  }
}

/*****************************
parts pagination
*****************************/
.pagination{
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.page-numbers{
  background: #7EB0E3;
  border-radius: 50px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
}
.page-numbers.current,
.page-numbers:hover{
  background: #F0AAC8;
  font-weight: bold;
  text-decoration: underline;
}
.page-numbers.dots,
.page-numbers.prev ,
.page-numbers.next {
  background: none;
  color: #333;
  height: auto;
  width: auto;
}
.page-numbers.dots {
  font-weight: bold;
  margin: 0 -0.5rem;
  text-decoration: none;
}
.page-numbers.prev:hover,
.page-numbers.next:hover {
  color: #7EB0E3;
}
.singlepager{
  padding-bottom: 6rem;
}
.pager{
  margin: 3rem auto 0;
  max-width: 330px;
  text-align: center;
}
.pager li{
  margin: 0 .5rem;
  width: 65px;
}
.pager li.all{
  width: 67px;
}
.pager a{
  border-bottom: 1px solid #7EB0E3;
  display: inline-block;
  font-size: 1.5rem;
  opacity: 1 !important;
  padding: 0rem 1rem;
  transition: .5s;
}
.pager a:hover{
  background: #7EB0E3;
  color: #fff;
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagination{
    gap: 1rem;
  }
}

/*****************************
parts archive オープンキャンパス
*****************************/
.oclist {
  gap: 2rem;
}
.oclist li{
  background: #fff;
  border-radius: 5px;
  padding: 1.5rem;
  width: calc(100% / 3 - 1.5rem);
}
.oclist li .ocarea{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 1;
  min-height: 400px;
  height: 100%;
}
.oclist li .imgbox img{
  aspect-ratio: 3/2;
  object-fit: cover;
  height: auto;
  width: 100%;
  transition: .5s;
}
.oclist li .time{
  background: #FBF9FA;
  border-radius: 50px;
  color: #E5BCCE;
  margin: .5rem auto;
  text-align: center;
}
.oclist li .ttl{
  border-bottom: 1px solid #E8E8E8;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  transition: .5s;
}
.oclist li .btn{
  /* background: linear-gradient(90deg,#7EB0E3,#F0AAC8); */
  background: #e661a7;
  border-radius: 5px;
  color: #fff;
  margin-top: 1rem;
  padding: .5rem;
  text-align: center;
  display: inline-block;
  width: 100%;
}
.oclist li .btn:hover{
  background: linear-gradient(270deg,#7EB0E3,#F0AAC8);
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .oclist li{
    width: calc(100% / 2 - 1rem);
  }
  .oclist li .infotxt{
    min-height: 100%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .oclist li{
    width: 100%;
  }
  .oclist li .ocarea{
    min-height: auto;
  }
}

/*****************************
parts archive news
*****************************/
.newslist > li{
  margin-top: 3rem;
  padding: 0 2rem;
}
.newslist > li time{
  display: block;
}
.newslist > li a:hover{
  color: #7EB0E3;
  font-weight: bold;
}

/*****************************
parts archive blog
*****************************/
.bloglinks{
  gap: 1rem;
}
.bloglinks li{
  text-align: center;
  width: calc(100% / 5 - 1rem);
}
.bloglinks li a{
  background: #fff;
  border: 2px solid #7EB0E3;
  display: block;
  opacity: 1;
  padding: 1rem .5rem;
  transition: .5s;
}
.bloglinks li a:hover,
.bloglinks li a.current{
  background: #7EB0E3;
  color: #fff;
}
.blogselect{
  display: none;
}
.blogselect select{
  background: #fff;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  border: 1px solid #7EB0E3;
  border-radius: 3px;
  padding: 1rem ;
}

.bloglist{
  gap: 4rem 2rem;
}
.bloglist li{
  width: calc(100% / 3 - 2rem);
}
.bloglist a{
  opacity: 1;
}
.bloglist .imgbox{
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.bloglist .imgbox img{
  aspect-ratio: 3/2;
  object-fit: cover;
  height: auto;
  width: 100%;
}
.bloglist time{
  color: #7D7D7D;
  font-size: 1.4rem;
}
.bloglist .ttl{
  font-weight: bold;
}
.bloglist a:hover .ttl{
  color: #7EB0E3;
  text-decoration: underline;
}
.bloglist .catlist{
  gap: .5rem;
}
.bloglist .cat{
  background: #7EB0E3;
  border-radius: 6px;
  color: #fff;
  font-size: 1.4rem;
  padding: 0 .8rem;
}
.bloglist .cat.cat-opencampus{
  background: #E37EB7;
}
.bloglist .cat.cat-interview{
  background: #69C287;
}
.bloglist .cat.cat-student{
  background: #9B86CE;
}
.bloglist .cat.cat-pa-topics { background: #69C287 ;}
.bloglist .cat.cat-pa-news { background: #F5A23A ;}
.bloglist .cat.cat-pa-opencampus { background: #FBC93B ;}
.bloglist .cat.cat-pa-restaurant { background: #95BFE7 ; }
.bloglist .cat.cat-pa-support { background: #FEB1C1 ;}
.bloglist .cat.cat-pa-qualification,
.bloglist .cat.cat-pa-column { background: #AF988B ;}
.bloglist .cat.cat-pa-student { background: #EFB6C2 ;}
.bloglist .cat.cat-pa-obog { background: #74B9B4 ; }
.bloglist .cat.cat-pa-course { background: #1E276E ;}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  .bloglinks-old li{
    width: calc(100% / 4 - 1rem);
  }
}
@media only screen and (max-width: 820px) {
  .bloglinks li{
    width: calc(100% / 3 - 1rem);
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .bloglinks{
    display: none;
  }
  .blogselect{
    display: block;
  }
  .bloglist li{
    width: 100%;
  }
  .bloglist a{
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    padding-bottom: .5rem;
  }
  .bloglist .imgbox{
    width: 90px;
  }
  .bloglist .imgbox img{
    height: 100%;
  }
  .bloglist .content{
    width: calc(100% - 100px);
  }
}

/*****************************
  parts single
*****************************/
.singleflex{
  padding: 8rem 0 6rem;
}
.singlemain{
  width: calc(100% - 280px);
}
.singleside{
  width: 260px;
}
.singlehead time{
  color: #7D7D7D;
  font-size: 1.4rem;
}
.singlehead .catlist{
  gap: .5rem;
}
.singlehead .cat{
  background: #7EB0E3;
  border-radius: 6px;
  color: #fff;
  font-size: 1.4rem;
  padding: 0 .8rem;
}
.singlehead .cat.cat-opencampus{ background: #E37EB7; }
.singlehead .cat.cat-interview{ background: #69C287;}
.singlehead .cat.cat-student{ background: #9B86CE;}
.singlehead .cat.cat-pa-topics { background: #69C287 ;}
.singlehead .cat.cat-pa-news { background: #F5A23A ;}
.singlehead .cat.cat-pa-opencampus { background: #FBC93B ;}
.singlehead .cat.cat-pa-restaurant { background: #95BFE7 ; }
.singlehead .cat.cat-pa-support { background: #FEB1C1 ;}
.singlehead .cat.cat-pa-qualification,
.singlehead .cat.cat-pa-column { background: #AF988B ;}
.singlehead .cat.cat-pa-student { background: #EFB6C2 ;}
.singlehead .cat.cat-pa-obog { background: #74B9B4 ; }
.singlehead .cat.cat-pa-course { background: #1E276E ;}

.singlehead .ttl{
  border-bottom: 2px solid #e4e4e4;
  font-size: 2.4rem;
  font-weight: bold;
  padding: .5rem 0;
  position: relative;
  margin-bottom: 2rem;
}
.singlehead .ttl::before{
  content: "";
  background: #7EB0E3;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100px;
}
.singleside .side:not(:last-of-type){
  margin-bottom: 2rem;
}
.singleside .side > dt{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.singleside .side > dt i{
  color: #7EB0E3;
}

.singleside .side-catlist > dd ul{
  gap: 1rem;
}
.singleside .side-catlist > dd li a{
  border: 1px solid #7EB0E3;
  border-radius: 3px;
  display: inline-block;
  opacity: 1;
  padding: .5rem 1rem;
  line-height: 1.4;
  transition: .5s;
}
.singleside .side-catlist > dd li a:hover{
  background: #7EB0E3;
  color: #fff;
}

.singleside .side-month select{
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  border: 1px solid #7EB0E3;
  border-radius: 3px;
  padding: 1rem ;
  max-width: 400px;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .singlemain,
  .singleside{
    width: 100%;
  }
  .singleside{
    margin-top: 5rem;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  
}

/*****************************
  フォーム
*****************************/
.fomtxt p{
  margin-bottom: 1rem;
}
.formbox .fomin{
  border-top: 1px dashed #7EB0E3;
  border-bottom: 1px dashed #7EB0E3;
  display: flex;
  /* align-items: center; */
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
}
.formbox .fomin:not(:first-of-type){
  border-top: 0;
}
.formbox .fomttl{
  font-weight: bold;
  padding: 2rem 1rem;
  text-align: left;
  width: 260px;
}
.formbox .fomttl .any,
.formbox .fomttl .required{
  background: #A42020;
  border-radius: 6px;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  margin-right: .5rem;
  padding: .2rem .5rem .3rem;
}
.formbox .fomttl .any{
  background: #1249B6;
}
.formbox .fomcontent{
  background: #fff;
  padding: 2rem;
  width: calc(100% - 260px);
}
.formbox .fomcontent span.error{
  background: none;
  margin: 0;
}
.formbox .fomcontent dl{
  margin-bottom: 1rem;
}
.formbox .fomcontent dt{
  width: 145px;
}
.formbox .fomcontent dd{
  margin-left: auto;
  width: calc(100% - 145px);
}
.formbox .input-check{
  text-align: left;
}
.formbox .input-radio .wpcf7-list-item,
.formbox .input-check .wpcf7-list-item{
  margin-right: 1rem;
  margin-left: 0;
}
.input-submit{
  margin: 3rem auto;
  text-align: center;
}
.formtxt{
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem 0 0;
}
.formtxt .inbox{
  margin: 2rem 0;
}
.formtxt .inbox p{
  margin-bottom: 2rem;
}

.formbox .input-txt input,
.formbox .input-num input,
.formbox .input-age input,
.formbox .input-zip input,
.formbox .input-txtarea textarea,
.formbox .input-select select {
  background: #f2f7fd;
  border: 1px solid #7EB0E3;
  border-radius: 3px;
  width: 100%;
}
.formbox .input-age input,
.formbox .input-num input{
  margin-right: 1rem;
  max-width: 100px;
}
.formbox .input-day:first-child{
  margin-bottom: 1rem;
}
.formbox .input-day input{
  width: calc(100% - 145px);
}

.formbox .input-txt input,
.formbox .input-num input,
.formbox .input-age input,
.formbox .input-zip input,
.formbox .input-select select {
  font-size: 1.6rem;
  height: 36px;
  padding: 0 .5rem;
}
.formbox .nameflex,
.formbox .telflex{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.formbox .nameflex .input-txt{
  width: calc(50% - 1rem);
}
.formbox .telflex .input-txt{
  width: calc(30% - 1rem);
}
.formbox .input-date input{
  margin: .5rem 0;
}
.formbox .input-select select{
  appearance: auto;
}
.formbox .input-txtarea textarea {
  padding: .5em;
}
.formbox .zipaddbox{
  margin-top: 1rem;
}
.formbox .input-mail2{
  margin-top: 1rem;
}
.formbox .input-zip input{
  width: 100px;
}
.formbox .input-zip .subtxt{
  display: block;
  font-size: 1.4rem;
  text-align: right;
}

.formbox .input-submit {
  text-align: center;
  margin-top: 2em;
}
.formbox .input-submit div {
  display: inline-block;
  vertical-align: middle;
}
.formbox .input-submit input {
  height: 50px;
  padding: 0 30px;
}
.pagesec-form{
  position: relative;
}
.pagesec-form .inner1{
  position: relative;
}
.pagesec-form .fomtxt,
.pagesec-form .formbox,
.pagesec-form .ppbox,
.formblock .lastcheck{
  margin: 0 auto;
  max-width: 800px;
}
.pagesec-form .fomtxt{
  margin: 3rem auto ;
  position: relative;
  text-align: center;
}
.pagesec-form .box{
  margin-top: 2rem;
  position: relative;
  padding-top: 1rem;
}
.pagesec-form .ppbox{
  margin: 2rem auto;
}
.pagesec-form .ppbox a{
  text-decoration: underline;
}
.pagesec-form .wpcf7-spinner {
  margin: 0;
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
}
form.sent .formblock,
form .sent-after,
form.sent .fomb{
  display: none;
}
form.sent .sent-after{
  display: block;
  margin: 0 auto 2rem;
  max-width: 800px;
  padding: 1rem;
  position: relative;
  text-align: center;
}
.pagesec-form .wpcf7 form .wpcf7-response-output{
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
  text-align: center;
}

.fomb {
  max-width: 300px;
  margin: 2rem auto 0;
}

.fomb{
  background: #7EB0E3;
  border: 2px solid #7EB0E3;
  border-radius: 30px;
  color: #fff;
  display: inline-block;
  font-weight: 500;
  min-width: 250px;
  margin: 2rem auto 0;
  opacity: 1;
  padding: .5rem 2rem;
  position: relative;
  transition: .5s;
}
.fomb::before{
  content: "";
  aspect-ratio: 3 / 4;
  background: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  transition: .5s;
  width: 10px;
}
.fomb input{
  color: #fff;
}
.fomb:has(input:disabled){
  background: #b5b5b5 !important;
  border-color: transparent;
}
.fomb:has(input:disabled)::before{
  background: #333 !important;
}
.fomb input:disabled{
  color: #333 !important;
}

.fomb:hover{
  background: #fff;
}
.fomb:hover input{
  color: #7EB0E3;
}
.fomb:hover::before{
  background: #7EB0E3;
}

.ocform {
  margin: 0 auto;
  max-width: 800px;
}
.ocform > div:not(:last-of-type){
  margin-bottom: 2rem;
}
.ocform > div > dt{
  background: #7EB0E3;
  color: #fff;
  font-weight: bold;
  padding: 1rem;
}
.ocform .formbox .fomin:first-of-type{
  border-top: 0;
}
.ocform .formbox .fomin:last-of-type{
  border-bottom: 0;
}
.ocfriend-textarea{
  width: 100%;
  height: 100px;
}

@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1080px) {
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  .formbox .fomttl {
    padding: 1.5rem 1rem 0;
    text-align: left;
    width: 100%;
  }
  .formbox .fomcontent{
    padding: 1.5rem 1rem;
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .formbox .input-zip .subtxt{
    margin-bottom: 1rem;
    text-align: left;
  }
  .contactlink .fbox{
    margin: .5rem 0;
    width: 100%;
  }
  .formbox .input-age input, .formbox .input-num input {
    margin-right: 1rem;
    max-width: 70px;
  }
  .pagesec-form .ppbox .formpp h3 {
    font-size: 2.4rem;
  }
  .pagesec-form .wpcf7 form .wpcf7-response-output{
    margin: 0 auto;
    max-width: 800px;
    padding: 20px;
    text-align: left;
  }
  .pagesec-form .txtbox,
  form.sent .sent-after{
    text-align: left;
  }

  .formbox .fomcontent dt,
  .formbox .fomcontent dd,
  .pagesec-form .samplebox .tblbox1 .tblttl ,
  .pagesec-form .samplebox .tblbox1 .tblcontent {
    width: 100%;
  }
  .formbox .input-add {
    margin: 0 0 1rem;
  }
  .pagesec-form .fomtxt{
    text-align: left;
  }
  .pagesec-form .fomtxt p,
  .pagesec-form .ppbox,
  .formblock .lastcheck{
    font-size: 1.6rem;
  }
}