@charset "UTF-8";

/* color */
:root {
    --primary-color: #EA6176;  /* メインカラー */
    --secondary-color: #2ecc71; /* サブカラー */
    --text-color: #333;  /* テキストカラー */
    --textwhite-color: #fff;  /* テキストカラー */
    --border-color: #f3eaea;  /* ボーダーカラー */
    --bgwhite-color: #fff;  /* 背景白カラー */
    --bgpink-color: #FEF7F7;  /* ピンク背景白カラー */
    --ocgreen-color: #28c76f;  /* OC緑カラー */
    --ocpurple-color: #a11ca4;  /* OC紫カラー */
  }

/* CSS Document */
html {
    font-size: 15px;
    height: 100%;
    margin: 0;
}

body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 横スクロールを防止 */
    overflow-y: auto; /* 縦スクロールを有効に */
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: var(--text-color);
    background: none;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    width: 100%;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
main{
    flex-grow: 1; /* main部分が残りのスペースを埋める */
    padding-bottom: 50px; /* フッターとの重なりを防ぐために余白を追加 */
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
*{
  padding:0;
  margin:0;
}
h2,
h3,
h4 {
    font-family: dnp-shuei-mgothic-std,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
    text-align: center;
    margin: 0;
}
h3{
    font-size: 23px;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
}
h3:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 5px;
    background-image: url(../images/border_b.png);
    background-size: contain;
    vertical-align: middle;
    border-radius: 20px;
}
h5{
    width: 100%;
    padding-left: 16px;
    border-left: 3px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 18px;
    font-family: "Yu Gothic", sans-serif;
    font-weight: 700;
    line-height: 27px;
    word-wrap: break-word;
}
h6{
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}
@media (max-width: 768px) {
    h3 {
        font-size: 18px;
    }
    h5 {
        font-size: 16px;
    }
}
h2 span {
    font-size: 14px;
    color: #525252;
    letter-spacing: 0.2em;
    display: block;
    margin-top: -15px;
}

h2 span::after {
    content: url(../images/border_a.png);
    display: block;
    /*前後に改行を入れる*/
}
p{
    margin: 0;
    line-height: 1.7;
}
a,
a:hover,
a:visited {
    color: #EA6176;
    outline: none;
}

ul {
    max-width: 100%;
    list-style: disc;
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
}
ol {
    max-width: 100%;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
}
li {
    display: list-item;
    margin-bottom: 16px;
    padding-left: 20px;
    text-indent: -20px;
}
li:last-child {
    margin-bottom: 0;
}
.note{
    font-size: 14px;
    text-indent: -1em;
    padding-left: 1em;
    line-height: 1.8;
}
.note::before {
    content: "※";
    margin-right: 0.25em;
}
.nowrap {
    white-space: nowrap;
  }
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: 76px!important;
  background: #ea6176;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*　header　*/
header {
    max-width: 100%;
    position: relative;
}

header a {
    color: #333;
    text-decoration: none;
}
header .tel-link a{
    color: #EA6176;
}

header h1 {
    margin: 0;
}

.menu section {
    display: table-cell;
    vertical-align: middle;
}

.header_logo {
    width: auto;
    max-width: 100%;
}

.menu {
    margin: 16px 24px;
}
.menu ul {
    max-width: 1000px;
}
.menu ul li{
    margin-bottom: 0;
    padding-left: 0;
    text-indent: 0;
}
ul.pc_menu li {
    display: table-cell;
}

.header_container {
    display: flex;
    justify-content: space-between; /* 両端に配置 */
    align-items: center; /* 縦の中央揃え */
    max-width: 1100px;
    margin: 0 auto;
    gap: 24px;
}
.header_menu_container{
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    gap: 16px;
}
.header_menu {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-end; /* 追加: 右寄せ */
    gap: 16px; /* 各アイテムの間隔を16pxに設定 */
    .menu-item {
        display: inline-block; /* アイテムが並ぶようにする */
        vertical-align: middle; /* 高さを合わせる */
    }
}
.header-logo-image {
    width: 100%; /* 親要素に対して幅を100%に */
    max-width: 300px; /* 最大幅300px */
    margin: 0 auto; /* 中央配置 */
}
.header-logo-image img {
    width: 100%; /* 画像が親要素の幅に合わせてリサイズ */
    height: auto; /* アスペクト比を保つ */
}
.awakan img{
    height: 30px;
    width: auto;
}
.header_menu .cvbtn {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: bold;
    height: 48px;
    padding: 0 24px; /* 縦の余白をなくす */
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s;
    line-height: 48px; /* テキストを高さの中央に */
    text-align: center;
    white-space: nowrap; /* ← 改行させない */
    overflow: hidden;     /* ← はみ出した部分を非表示 */
    text-overflow: ellipsis; /* ← はみ出したとき「…」で省略 */
    max-width: 100%;      /* ← 親の幅を超えないように */
}
/* Hover時のアニメーション */
.header_menu .cvbtn:hover {
    background-color: var(--primary-color-dark, #d43957); /* 少し濃い色に変化 */
    opacity: 0.7; /* 透明度を70%に設定して薄くする */
}

.header_menu_top {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 16px; /* アイテム間の間隔を16px */
    width: 100%;
}
.head_telbox {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: flex-start; /* 左揃え（中央揃えなら center） */
    a{
        color: var(--primary-color);
    }
}
.tel_number {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: bold;
}  
.tel_time {
    color: var(--text-color);
    font-size: 12px;
}
/* メニュー全体の設定 */
.new-header-menu {
    width: 100%;
}

.new-header-menu-list {
    display: flex;
    gap: 24px;
    justify-content: flex-end; /* メニューを右寄せに */
    align-items: flex-start;
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* メニューアイテムの設定 */
.new-header-menu-item {
    position: relative; /* ドロップダウンの位置をこの要素に対して調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 30px;
    padding-right: 16px; /* 右側にスペースを追加 */
}

/* 最後のアイテムには罫線を表示しない */
.new-header-menu-item:last-child {
    border-right: none;
}

/* 矢印のアイコンの設定 */
.menu-arrow {
    width: 16px;
    height: 16px;
    margin-left: 8px;
}

/* メニューアイテム間の縦線 */
.new-header-menu-item:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

/* ドロップダウンメニューの設定 */
.new-header-menu-dropdown-list {
    display: none;
    list-style: none;
    position: absolute;
    top: 100%; /* 親要素の下に配置 */
    right: 0; /* 親要素の左端に合わせる */
    background-color: var(--bgwhite-color);
    z-index: 10;
    width: max-content;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* ホバー時にドロップダウンを表示 */
.new-header-menu-item:hover .new-header-menu-dropdown-list {
    display: block;
}

/* ドロップダウンメニューアイテム */
.new-header-menu-dropdown-item {
    text-align: left;
    width: auto;
    border-bottom: 1px solid var(--border-color);
}

/* ドロップダウンアイテムのリンク */
.new-header-menu-dropdown-item a {
    display: block;
    color: #333;
    background-color: var(--bgwhite-color);
    padding: 10px 15px;
    width: 100%;
    text-decoration: none;
}

/* リンクホバー時のスタイル */
.new-header-menu-dropdown-item a:hover {
    color: var(--primary-color);
    background-color: #f5f5f5;
    width: 100%;
}
.breadcrumb{
    width: 100%;
    border-top: 1px solid var(--border-color);
}
.breadcrumb_inner{
    max-width: 1100px;
    padding: 8px 24px;
    margin: 0 auto; /* 水平中央寄せ */
}

/* スマホ・タブレット版のスタイル */
@media (max-width: 768px) {
    .fixed{
        padding: 20px 0;
    }
    .header_container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
        gap: 8px;
    }
    
    .header_logo {
        order: -1; /* ロゴを上に持ってくる */
        width: 100%;
        text-align: center;
    }

    .header-logo-image {
        width: 100%; /* 画像が親要素に合わせる */
        max-width: 250px; /* ロゴ画像の最大幅 */
        margin: 0 auto; /* 中央配置 */
    }
    
    .header_menu_container {
        display: block; /* メニューの表示を縦に */
        width: 100%;
    }

    .header_menu {
        display: block;
        text-align: center; /* メニューアイテムを中央に */
        gap: 12px;
    }

    .new-header-menu-list {
        display: block; /* メニューアイテムを縦に並べる */
        gap: 12px;
        align-items: flex-start;
        text-align: left;
    }

    .new-header-menu-item {
        text-align: left; /* メニューアイテムを左寄せ */
    }

    .head_telbox {
        display: block; /* 電話情報を縦に並べる */
        align-items: center;
    }
}

/* スマホ・タブレットより狭い画面での調整 */
@media (max-width: 480px) {
    .new-header-menu-list {
        gap: 8px;
    }

    .header_menu {
        gap: 10px; /* メニューアイテムの間隔を小さく */
    }
}

/* スペースを空けるために改行処理 */
.new-header-menu__br--sp {
    display: none;
}

/* スマホ対応（小さい画面でメニューを縦に表示） */
@media screen and (max-width: 1300px) {
    .new-header-menu-item {
        width: 100%; /* アイテムを100%幅に */
        text-align: left;
    }

    .new-header-menu__br--sp {
        display: block; /* 改行を表示 */
    }

    .new-header-menu-dropdown-list {
        width: 100%; /* ドロップダウンの幅を調整 */
    }

    .new-header-menu-item::after {
        right: 10px;
        top: 50%;
        transform: translateY(-50%) rotate(135deg);
    }
}


.fixed .header_menu {
    max-width: 100%;
}

.head_telbox{
    display:table;
}
.head_telbox section{
    display: table-cell;
}
.tel-link {
    color: #EA6176;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin: 0;
    line-height: 1.2em;
    padding: 0 10px;
}
.tel-link span{
    letter-spacing: 0;
    display: block;
    font-size: 11px;
    line-height: 1.5em;
}

.head_tel {
    font-size: 14px;
    background-color: #EA6176;
    color: #fff;
    padding: 5px 10px;
    margin-right: 5px;
    display: inline-block;
    letter-spacing: 0;
}


.header_menu ul {
    margin: 0;
}

ul.header_menu_top li {
    display: table-cell;
    vertical-align: middle;
}

ul.header_menu_top li img {
    margin: 0 10px 0 0;
    padding: 0;
    display: block;
    height: 30px;
}

ul.pc_menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


.menu h1 {
    height: 50px;
    margin-right: 30px;
}

.menu h1 img {
    height: 100%;
    width: auto;
}
.sp_area{
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 24px 20px 8px;
    .header-logo-image{
        display: flex;
        justify-content: flex-end; /* これでロゴを右に配置 */
        width: auto; /* 親要素の幅に合わせる */
        margin: 0;
        max-width: 200px;
    }
}
.sp_area h1{
    position: absolute;
    right: 0;
    height: 55px;
    width: auto;
    top: 0;
    padding: 0;
}
.sp_area h1 img{
    padding: 20px 20px 10px;
    height: 40px;
    width: auto;
}

.drawer-menu {
    margin: 70px 0px 0!important;
}

.drawer-hamburger{
        padding: 30px .75rem 30px!important;
}
.drawer-menu a{
    color: #333;
    padding: 0;
}

.drawer-sns {
    margin-top: 20px;
    text-align: center;
    padding-left: 0!important;
}

.drawer-sns li {
    display: inline-block;
    width: 40px;
    margin-right: 10px;
}

.drawer-sns li:last-child {
  margin-right: 0;
}

.contents_innner {
    padding-top: 100px;
    margin-top:-100px;
}

.top-page-title{
    text-align: center;
    font-size: 15px;
}
/* main */
.wi {
    width: 100vw;
    margin: 0 auto;
    padding: 0 60px;
}

.wi_b {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}


.copy {
    position: absolute;
    right: 40px;
    bottom: 30px;
}
.copy span{
	background-image: linear-gradient(to right, #ffb8ce, #fff1d5);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: bottom;
}
.copy p{
    font-size: 1.7em;
    font-family: dnp-shuei-mgothic-std,sans-serif;
    font-weight: 400;
    font-style: normal;
}
.copy img {
    height: 100%;
    width: auto;
    object-fit: inherit;
    right: 0;
    top: 0;
    bottom: 0;
}

/***/
.hero {
    position: relative;
    overflow: hidden;
    padding: 0;width: 100%;
    aspect-ratio: 2.5 / 1; /* 横2.5に対して縦1の比率 */
    width: 100%;
}
.hero .slick-dotted.slick-slider{
    margin: 0;
}
.hero .slick-dots{
    margin-bottom: -30px;
    z-index: 100;
}
.hero .presentation{
    display: none!important;
}
.hero .slider,.hero .slider_sp{
    position: absolute;
    margin: 0;
    padding: 0!important;
    max-width: 100%;
    width: 100%;
}

.hero .slider li img,.hero .slider_sp li img{
    border-radius: 0;
    width: 100%;
    filter: none;
    object-fit: cover;
}
.hero-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 456.06%;
}
.hero-list__item {
    overflow: hidden;
    width: 100vw;
    margin: 0 0 0 6.25vw;
}
.r-14lw9ot{
    height: 350px;
}
@media screen and (min-width: 426px) {
    .hero .slider{
        display: block;
    }
    .hero .slider_sp{
        display: none;
    }
}
@media screen and (max-width: 425px) {
    .hero .slider li{
        padding: 0;
    }
    .hero .slider_sp{
        display: block;
    }
    .hero .slider{
        display: none;
    }
    .top-page-title{
        font-size: 14px;
        color: #333;
        padding: 0;
    }
    .top-page-title span{
        display: inline-block;
    }
}

.hero-list__item-box p {
    transform: scale(1.2);
    width: 120%;
    margin: 0 0 0 -20%;
    padding: 75% 0 0;
    background-image: url(../images/top_kv_01_back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}
.hero-list__item-box img{
    object-fit: cover;
}
.hero-list__item.m--02 p {
    background-image: url(../images/top_kv_02_back.jpg);
    background-size: cover;
}
.hero-list__item.m--03 p {
    background-image: url(../images/top_kv_03_back.jpg);
    background-size: cover;
}
.slide-second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-inner:first-child {
  animation: loop 90s linear infinite;
}
 
.hero-inner:nth-child(2) {
  animation: loop2 90s -60s linear infinite;
}
 
.hero-inner:last-child {
  animation: loop3 90s -30s linear infinite;
}
 
@keyframes loop {
  0% {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-100%);
  }
}
 
@keyframes loop2 {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-200%);
  }
}
 
@keyframes loop3 {
  0% {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-300%);
  }
}
/***/


.slick-track{
    margin: 0 auto;
}
.topics{
    margin-top: 60px;
}
.topics p{
    margin-top: 20px;
}
.topics button{
    display: none!important;
}
.news {
    table-layout: fixed;
    text-align: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.news h2{
    margin-bottom: 40px;
}
.news_inner {
    display: table;
    margin: 0 auto;
    width: 100%;
}

.news_contents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 16px;
    align-items: start;
}

.news_contents_item {
    list-style: none;
    min-width: 0;
    max-width: 350px;
    margin: 0 auto;
    p{
        text-align: left;
    }
}

.news li:last-child {
    padding-right: 0;
}

.news section {
    display: table-cell;
    vertical-align: top;
    padding-right: 20px;
}

.news section:first-child {
    width: 65%;
}

.news section:last-child {
    width: 35%
}

.post-categories {
    display: inherit!important;
    grid-template-columns: inherit!important;
    grid-auto-rows: inherit!important;
    padding: 0 !important;
}
ul.post-categories li{
    border-radius: 10px;
    background-color: #96DDEF;
    display: inline-block;
    min-width: 130px;
    margin-bottom: 10px;
}
ul.post-categories li:last-child{
    margin-bottom: 0;
}

.timeline-Tweet-text {
    font-size: 14px !important;
}

.news section:last-child {
    padding-right: 0;
    padding-left: 20px;
}

.news h3 {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.75em;
    font-weight: normal;
    font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    text-align: left;
    padding: 0 30px;
}

.thumbnail {
    margin: 0 auto;
    height: 150px;
    width: 150px;
}

.date {
    font-size: 14px;
    margin: 10px 0;
}

.category {
    
}

.category span {
    text-align: center;
    margin: 0 auto;
}

.category a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* トピックス */
.slider,.slider_sp {
    max-width: 500px;
    padding: 0.8em;
    margin: 0 auto;
}

.slider p,.slider_sp p {
    text-align: center;
}
.slider li{
    display: table-cell;
    border-radius: 20px;
    padding-left:0;
    list-style: none;
    margin: 0 auto;
}
.slider_sp li {
    display: table-cell;
    width: auto;
    height: 160px;
    border-radius: 20px;
    list-style: none;
    margin: 0 auto;
}
#nav{
    height: 100%;
}
.slider li img ,.slider_sp li img{
    display: block;
    margin: 0 auto;
    width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    filter: drop-shadow(0 0 0.25rem #C4C4C4);
}
.hero button{
    display: none!important;
}

.slider_sp li img{
    width: 80%;
}
.slider_sp li{
    padding: 0;
}
.slider_sp p{
    margin: 10px auto 0;
}
.slick-list {
    width: 100%;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 20px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}
.slick-dots2 {
  position: absolute;
  bottom: -40px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
}
.slick-dots2 li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots2 li.slick-active
  button::before {
  color: red;
}
.slick-dots2 li button {
  background: transparent;
  border:0;
  font-size: 0pt;
}
.slick-dots2 li button::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
}
@media screen and (max-width: 1024px) {
    .news section {
        display: contents;
    }

    .twitter iframe {
        padding-top: 30px !important;
        width: 90% !important;
    }
    .slick-dotted.slick-slider{
        margin: 0!important;
        padding: 0;
    }
    .copy p {
        font-size: 2.7em;
    }
    .copy img {
        height: 100%;
        width: auto;
        object-fit: inherit;
    }
    .copy{
        font-size: 0.7em;
    }
}
@media screen and (max-width: 768px) {
    .slider li{
        padding: 0 10px;
    }
    
    .topics {
        margin: 60px 0;
    }
    .copy{
        height: 0;
        bottom: 80px;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
    }
    .copy p{
        font-size: 30px;
    }
    .hero .slick-dots li button:before{
        display: none;
    }
}
@media screen and (max-width: 768px){
    .copy p {
        line-height: 1.25em;
    }
}
@media screen and (max-width: 425px) {
    .copy{
        display: none;
    }
    .copy p{
        font-size: 20px;
        line-height: 1.35em;
        text-align: left;
        margin-left: 30px;
    }
    .hero {
        height: 340px;
    }
    .hero .slider li img, .hero .slider_sp li img {
        height: 340px;
        width: 100%;
    }
    .slider li img, .slider_sp li img{
        width: 250px;
    }
    .topics {
        margin: 20px 0;
    }
    .topic_sp ul{
        padding: 0 20px;
    }
    .slider_sp {
        margin: 0 auto;
    }
    .slider li {
        padding: 0 30px;
    }
    .slider_sp p{
        line-height: 1.5em;
    }
}
@media screen and (max-width: 414px) {
    .sp_area h1 img {
        padding: 22px 20px 10px;
        height: 35px;
        width: auto;
    }
    .slider li{
        height: auto;
    }
   .sp_area .copy {
        bottom: -10px;
    }
    .news {
        padding: 0 30px;
    }
    h2{
        margin: 0;
        font-size: 2em;
    }
    .news ul {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: auto;
    }
    .twitter iframe {
        padding: 0 0 60px !important;
        width: 100% !important;
    }
    .hero img {
    object-position: 50% 100%;
    }
    
}
/** Pixel2 **/
@media screen and (min-width: 555px){
    .sp_br{
        display: none;
    }
}
@media screen and (max-width: 375px){
    .copy img {
        height: auto;
        width: 100%;
    }
    .copy p {
        font-size: 20px;
    line-height: 1.5em;
    }
    .sp_br{
        display: block;
    }
    .topics {
        margin: 40px 0;
    }
    .slider_sp li img {
        width: 60%;
    }
    .slick-dots{
        display: none!important;
    }
    .slider_sp li{
        height: auto;
    }
}
@media screen and (max-width: 360px){
    .copy{
            bottom: 70px;
    }
    .copy p {
        font-size: 18px;
    }
}
@media screen and (max-width: 320px){
    .hero {
        height: 200px;
    }
    .hero .slider li img, .hero .slider_sp li img {
        height: 200px;
        width: 100%;
    }
    .topics {
    margin: 30px 0 0;
}
}
/* about */
.contents_title{
    margin: 60px 0 30px;
}
.about {
    background: #2BC0E4;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #EAECC6, #2BC0E4);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #F1FDFE, #FDF7DA);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 0;
    margin: 0 60px;
    width: auto;
    table-layout: fixed;
    display: table;
}

.about_inner {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}
#about_copy{
    width: auto;
    height: 180px;
    margin: 0 auto;
}
#about_copy.is-show {
    width: 100%;
}

.about_inner h2 {
    padding: 60px 0;
    margin: 0;
}

ul.about_head {
    position: relative;
    width: 100%;
    padding: 0;
    list-style: none;
    display: table;
}

ul.about_head li {
    width: 40%;
    vertical-align: top;
    display: table-cell;
}
ul.about_head li:last-child {
    width: 60%;
    background-color: #f7f7f7;
    display: inline-block;
}

ul.about_head .about_img {
    position: absolute;
    padding-right: -30px;
}

.about_img {
    width: 100%;
}
/**/
.about_head {
    position: relative;
    width: 100%;
    display: table;
}

.about_head .about_txt, .about_head .about_img {
    display: table-cell;
    vertical-align: top;
}

.about_head .about_txt {
    width: 40%;
}

.about_head .about_img {
    width: 60%;
}

.about_head .about_img img {
    width: 100%;
}

.about_head .about_txt {
    padding-right: -30px;
}
/**/

.about_contents {
        padding: 40px 60px;
    display: grid;
    gap: 50px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto;
}


.about_box {
    display: inline-block;
    background-color: var(--bgwhite-color);
    position: relative;
    height: auto;
    max-width: 100%; /* 親の幅に収める */
    margin: 0;
    border-radius: 10px;
    padding: 40px 16px 16px;
}

.features img.dormitory_bnr{
    height: auto;
    width: 80%;
    margin: 10px 0 20px;
}
@media screen and (max-width: 767px) {
    .features img.dormitory_bnr{
        width: 100%;
    }
}

.box-big1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.box-big2 {
  grid-column: 2 / 4;
    grid-row: 1 / 3;
}
.box-big3 {
  grid-column: 2 / 4;
}
.box-big4 {
  grid-row: 2 / 5;
}
.box-big5 {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}
.box-big6 {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
}
.box-big7 {
    grid-row: 5 / 6;
    grid-column: 1 / 4;
}


.linethrough{
    text-decoration: line-through;
}
.view_timer{
    padding-left: 20px;
    margin-bottom: 60px;
}


.about_box h3 {
    position: absolute;
    top: -32px;
    left: 0px;
    line-height: 1em;
    background-color: #fff;
    padding: 12px 24px 8px;
    z-index: 1;
    border-radius: 12px;
}
.about_box ul li p {
    text-align: justify;
    padding: 0;
}
.about_box h4 {
    font-size: 20px;
    color: #EA6176;
    text-align: left;
    margin: 0 0 10px 0;
}
.about_box ul {
    width: 100%;
    table-layout: fixed;
    text-align: left;
}

.guidebook img,.leaflet img {
    display: table;
    margin: 0 auto 30px;
    height: 220px;
    max-width: 100%;
    width: auto;
    box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 18%);
}
.about_box p {
    font-size: 15px;
    line-height: 2em;
    text-align: justify;
}

.about_img img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    opacity: 0.9;
    display: block;
}

ul.about_separation {
    display: table;
    width: 100%;
    table-layout: fixed;
    text-align: center;
    padding: 30px 0;
    
}

ul.about_separation li {
    vertical-align: top;
    display: table-cell;
    padding-right: 30px;
    height: 100%;
}

ul.about_separation li:first-child {
    width: 75%;
}

ul.about_separation li:last-child {
    width: 40%;
}

ul.about_separation li:last-child {
    padding-right: 0;
    padding-left: 30px;
}

.about_separation p,
td {
    text-align: justify;
}
.greeting_name{
    margin: 0 0 0 auto;
        text-align: right;
}
.greeting_name span{
    vertical-align: text-bottom;
}
.greeting {
    padding: 50px 30px;
}
.greeting p{
    padding: 0!important;
}
.greeting_name img{
    margin: 0!important;
    width: 160px!important;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
}
ul.features{
    margin: 0;
    padding: 50px 30px;
    list-style: none;
    width: auto;
}
.features img{
    width: 100%;
    margin-top: 15px;
    height: 300px;
    object-fit: cover;
}
ul.features li{
    padding: 0;
    display: inherit;
  }
.features small{
    display: block;
    line-height: 1.75em;
    margin: 20px 0 0;
}
/********** 

　テーブル

**********/
.tbl-r02 th {
    background: #FFE2A3;
    color: #555;
    padding: 5px 10px;
    min-width: 150px;
    font-size: 14px;
}

.tbl-r02 td {
    display: inline-table;
    padding: 5px 10px;
    width: 100%;
}

.tbl-r03 th {
    background: #F7BDC1;
    color: #555;
    padding: 0 10px;
    min-width: 150px;
    font-size: 14px;
}

.tbl-r03 td {
   padding: 10px;
    width: 100%;
}
.examination_block tr{
    margin-bottom: 10px;
}

@media screen and (max-width: 425px) {
    .last td:last-child {
        width: 100%;
    }

    .tbl-r02 th,
    .tbl-r02 td {
        border-bottom: none;
        display: block;
        width: 100%;
    }
}
@media screen and (max-width: 414px) {
    .about_box table {
        margin: 50px auto;
    }
    .tbl-r02 td{
        border: none!important;
    }
    .tbl-r02 tr{
        width: 100%;
    }
    .tbl-r02 .tbody{
        width: 100%;
    }
    .tbl-r02 th, .tbl-r02 td{
        width: auto;
    }
    .examination_block .tbl-r02 {
        width: 100%;
    }
    .tbl-r03 tr{
        display: grid;
    }
    .tbl-r03 td,.tbl-r03 td:last-child{
        width: auto;
    }
    .greeting_name img {
    width: 140px!important;
    height: 140px;
    }
    
}
@media screen and (max-width: 1200px) {
    
    .about_contents {
        padding: 40px 60px 100px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:auto;
    }
    .features img {
        height: 200px;
    }
    .greeting_name{
        margin-bottom: 0;
    }
    .box-big1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .box-big2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .box-big5 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .box-big6 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .box-big4 {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }
    .box-big3 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }
    .box-big7 {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }
}


@media screen and (max-width: 1024px) {
    .about_inner h2 {
        padding: 60px 0 30px;
    }
    ul.about_head li {
        width: 100%;
        display: inherit;
    }
    ul.about_head .about_img {
        width: 100%;
        position: inherit;
    }
    .about_img img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .contents {
    padding-top: 0;
    }
    .contents_innner {
        padding-top: 0;
        margin-top: 0;
    }
    .about{
        padding: 0;
        margin: 0;
    }
    ul.greeting li{
        vertical-align: top;
    }
    ul.features li{
        display: inherit;
        width: 100%;
        padding: 0;
    }
    ul.features li:first-child{
        margin-bottom: 30px;
    }
    .about_contents{
        grid-template-columns: 1fr;
    }
    .box-big1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .box-big2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .box-big5 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .box-big6 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .box-big4 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .box-big3 {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
    .box-big7 {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }

}
@media screen and (max-width: 640px) {
    .greeting_name{
        text-align: center;
        margin: 0 auto;
        margin-top: 20px;
    }
    .greeting_name span{
        display: block;
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
    }
}
@media screen and (max-width: 541px) {
    .about_contents {
        padding: 40px 30px 100px;
    }
}
@media screen and (max-width: 425px) {
    .about_box ul li p {
    margin-top: 20px;
    }
    .greeting p span{
        margin: 20px 0;
    }
    .greetingimg{
        padding: 0;
        margin: 0 0 0 auto;
    }
    .tbl-r02 th, .tbl-r02 td {
        width: auto;
    }
    h2{
        font-size: 24px;
        line-height: 150%;
    }
}
@media screen and (max-width: 414px) {
    .about_inner{
        padding: 0 30px 60px;
    }
    .about_contents {
        padding: 0;
    }
    ul.about_separation{
        padding: 0;
    }
    .about_box{
        margin: 30px auto 0;
    }
    .about_box p{
        padding: 50px 30px 30px;
    }
    ul.greeting{
        padding: 0 30px 0;
    }
    .greetingimg{
        margin: 0 0 0 auto!important;
    }
    ul.about_head {
        position: relative;
        max-width: 100%;
        width: auto;
        padding: 0;
        list-style: none;
        display: inline-block;
    }
    .about_txt img {
        width: 100%;
    max-width: 300px;
    }
    .about_box .guide img{
        max-height: 200px;
        max-width: 90%;
    }
    .about_box h4{
        margin: 0 0 20px 0;
        text-align: justify;
        line-height: 1.5em;
    }
    .about_box small{
        display: block;
        margin-top: 14px;
        line-height: 1.75em;
    }
}
@media screen and (max-width: 320px) {
    .features img {
        height: 150px;
    }
}
/********** 

　入試情報 

**********/
.head_bg {
    background: #2BC0E4;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #EAECC6, #2BC0E4);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #F1FDFE, #FDF7DA);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 200px;
    width: 100%;
    margin: 0 0 80px;
    position: relative;
}

.head_bg h2 {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.examination_block {
    max-width: 1000px;
    margin: 0 auto;
}

.interview_link{
    margin-top: -40px;
    font-size: 16px;
    padding: 0 15px 50px;
    text-align: center;
}

.examination_about {
    overflow-x: auto; /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch; /* スマホでなめらかに */
}

/* 共通：テーブルの基本スタイル */
.examination_about table {
    border-collapse: collapse;
    text-align: center;
    width: 100%; /* デフォルトは100%に */
    min-width: auto; /* デフォルトで制限しない */
}

/* スマホ（狭い画面）ではテーブルに横スクロール対応 */
@media (max-width: 768px) {
.examination_about table {
    width: 800px; /* 固定幅にして横スクロール対象に */
    min-width: 800px;
}
}

/* PC（広い画面）では親の幅に合わせて表示 */
@media (min-width: 769px) {
.examination_about table {
    width: 100%;
    min-width: auto;
}
}
.examination_about th, td {
    border: 1px solid #ccc;
    padding: 0.8em;
}

.examination_about th {
    background-color: var(--bgpink-color);
    color: #333;
    font-weight: bold;
}

.examination_about td.schedule-label {
    font-weight: bold;
    background-color: #f8f8f8;
    text-align: center;
    width: 40px;
}

.examination_about td[colspan] {
    background-color: #fff0f5;
}
.table-wrap {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrap table {
        width: 800px; /* 横スクロール対象はテーブルだけにする */
        min-width: 800px;
    }
}
/* PCではスクロールさせない */
@media (min-width: 769px) {
.table-wrap {
    overflow: visible;
}

.examination_about {
    width: 100%; /* 画面いっぱいに伸ばす */
}
}

.examination_about .btn{
    color: #333;
    text-decoration: none;
}
.examination_about li ul li{
    font-weight: normal;
}
.examination_block h3 {
    font-size: 23px;
    font-weight: normal;
    text-align: left;
    line-height: 1em;
    margin-bottom: 50px;
}
.strike{
    text-decoration: line-through;
}
.examination_block h3::after {
    content: '';
    /*何も入れない*/
    display: inline-block;
    /*忘れずに！*/
    width: 100%;
    height: 5px;
    background-image: url(../images/border_b.png);
    background-size: contain;
    vertical-align: middle;
    border-radius: 20px;
}



.examination_about section {
    display: table-cell;
    vertical-align: top;
}

.examination_about img {
    width: auto;
    height: 300px;
    text-align: center;
    margin: 0 auto 24px;
    display: block;
    box-shadow: 0 15px 15px 0 rgb(0 0 0 / 35%);
}

ul.apply {
    padding: 0;
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 35px 0;
    margin: 100px 0;
}

ul.apply li {
    display: table-cell;
    vertical-align: top;
    width: 25%;
    text-align: center;
}

.textarea {
    margin-bottom: 50px;
}

.textarea p {
    line-height: 2em;
    margin-left: 20px;
}
.entrybox p::before{
    content: '●';
    color: #ffd1d1;
    padding-left: 5px;
    font-size: 20px;
    font-weight: bold;
}
.entrybox table{
    margin-bottom: 30px;
}

.application_form {
    margin: 60px auto 0;
    display: table;
}
.tbl-r03 img{
    width: 100%;
}
.oc{
    background: #2BC0E4;
    background: -webkit-linear-gradient(to bottom, #EAECC6, #2BC0E4);
    background: linear-gradient(to bottom, #F1FDFE, #FDF7DA);
    padding: 100px 60px;
    width: auto;
    table-layout: fixed;
}

.oc .contents_title {
    margin: 0 0 60px;
}
.oc ul{
    padding-left: 16px;
    box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
    ul.apply{
        margin: 60px 0;
        border-spacing:inherit;
    }
    .about_separation{
        display: inherit;
    }
    ul.about_separation li:first-child,ul.about_separation li:last-child{
        width: 100%;
        padding: 0;
    }
    
    ul.about_separation li{
        display: inherit;
    }
}
@media screen and (max-width: 768px) {
    ul.apply{
        display: block;
        margin: 40px auto;
        height: auto;
        text-align: center;
    }
    ul.apply li{
        display: inline-table;
        margin: 5px;
    }
    .entrybox .tbl-r02 {
        width: 100%;
    }
    .oc{
        padding: 60px 0;
        margin: 0 auto;
    }
}
@media screen and (max-width: 626px) {
    .examination_about section{
        display: inherit;
    }
    .examination_about section {
        width: 100%;
    }
    .examination_about .textarea {
        margin-bottom: 30px;
    }
    .examination_about .btn {
        margin-bottom: 50px;
    }
    .examination_about ul{
        padding-left: 20px;
        margin-bottom: 30px;
    }
    .examination_block h3 {
        margin-bottom: 30px;
    }
    .oc .btn {
        margin-bottom: 0;
    }
    .oc .about_inner{
        padding: 0;
        margin: 0 auto;
    }
    .oc .textarea{
        margin-bottom: 0;
    }
}
@media screen and (max-width: 425px) {
    .oc .contents_title {
        margin: 0 0 30px;
    }
    .application_form{
        margin: 0 auto;
    }
}
@media screen and (max-width: 414px) {
    .examination_block{
        padding: 0 30px;
    }
        ul.features {
        padding: 50px 30px;
    }
    .examination_about section {
        display: inherit;
        width: 100%;
    }
    h5{
        margin:10px 0 0;
        padding-left: 25px;
    }
    .examination_about section:last-child{
        margin-bottom: 30px;
    }
    .examination_about ul{
        padding: 0 10px;
        margin: 0 0 20px;
    }
    .examination_about li {
        font-size: 14px;
        line-height: 2em;
        font-weight: normal;
        /* padding-left: 25px; */
    }
    h5::before{
        left: 5px;
    }
    ul.apply li {
        display: inline-table;
        margin: 5px;
        width: 100%;
    }
    ul.apply {
        display: inline-grid;
        margin: 0 auto;
        height: auto;
        padding: 20px 0;
    }
    .textarea p{
        margin: 20px 0;
    }
    
    .oc h5{
        margin: 50px 0 30px;
    }
    .oc li{
        padding-left: 0;
    }
}
@media screen and (max-width: 320px) {
    ul.apply li {
        margin: 10px auto;
        width: 100%;
    }
    .oc h2{
        font-size: 1.8em;        
    }
}
/*　footer　*/
footer {
    padding: 30px;
    margin: 10px 0 0 0;
}

@media screen and (max-width: 640px) {
footer {
    margin: 10px 0 52px 0;
    }
}

footer ul {
    display: table;
    padding: 0;
    margin: 10px 0 0 0;
}

footer ul li {
    display: table-cell;
    padding-right: 20px;
}

footer ul li:before {
    content: '>';
    margin-right: 10px;
}

footer ul li:last-child {
    padding-right: 0;
}

footer p {
    margin: 0;
}

footer p span {
    border: 1px solid #EA6176;
    border-radius: 10px;
    padding: 3px 10px;
    margin-left: 10px;
    vertical-align: middle;
}

footer a {
    text-decoration: none;
}

footer a i {
    color: #8c8c8c;
}

footer p a {
    font-size: 11px;
}

footer .copyright {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 20px;
}

.footer_logo {
    max-width: 300px;
    margin-bottom: 15px;
}

.footer_logo img {
    width: 100%;
}

.line-top {
    background: url(../images/bg_line_h.png) repeat center center;
    height: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.line-right {
    background: url(../images/bg_line_r.png) repeat center center;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 10px;
    z-index: 1000;
}

.line-bottom {
    background: url(../images/bg_line_h.png) repeat center center;
    bottom: 0;
    height: 10px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.line-left {
    background: url(../images/bg_line_l.png) repeat center center;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 10px;
    z-index: 1000;
}

/********** 

　アクセス

**********/
.access {
    margin: 0 auto 30px;
}
.access iframe{
    padding: 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
.access ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    display: table;
    text-align: left;
}

.access {
    text-align: center;
}

.address span a{
    text-decoration: none;
}

/* .access p {
    text-align: left;
}
 */

.display_block{
    display: block;
}
.banner .border{
    border: 1px solid #999;
}
.banner{
    max-width: 400px;
    margin: 0 auto;
}
.banner a{
    display: block;
}
.banner img{
    width: 100%;
}
.w50{
    width: 50%;
}
.p_s16{
    padding: 0 16px;
}
.p_s24{
    padding: 0 24px;
}
.m_t16{
    margin-top: 16px;
}
.m_b16{
    margin-bottom: 16px;
}
.m_t40{
    margin-top: 40px;
}
.m_s16{
    margin: 0 16px;
}
.fs18 {
    font-size: 18px;
    margin: 0 auto 30px;
}
.address{
    font-size: 14px;
}
.btn_round{
    display: table;
    height: 48px;
    line-height: 3;
    border: 1px solid #EA6176;
    border-radius: 999px;
    padding: 3px 10px;
    margin: 0 auto;
    vertical-align: middle;
    padding: 0 30px;
    .fas{
        margin-left: 0;
    }
}
.btn_round a{
    text-decoration: none;
}
.mb{
     margin-bottom: 20px;
}
.contact{
    padding: 0;
}
.contact_inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 30px;
}

.contact_inner h5 {
    text-align: left;
}

.contact_inner p {
    text-align: left;
    padding: 0;
    line-height: 2em;
    margin-bottom: 20px;
}

.contact_tel {
    display: table;
    margin: 30px auto 0;
}
.contact_tel ul{
    margin: 0 auto 10px;
}
.contact_tel ul li{
    font-weight: normal;
    color: #333;
    font-size: 17px;
}
.contact_tel ul li span{
    font-size: 20px;
    color: #EA6176;
    font-weight: bold;
    font-family: fot-tsukuardgothic-std, sans-serif;
    line-height: 1.5em;
    letter-spacing: 0.12em;
    padding: 0;
}

.contact_tel p {
    text-align: center;
    line-height: 2em;
    margin: 0;
}

.contact_inner p span {
    display: block;
}

span.wpcf7-list-item {
    display: inline-block !important;
    margin: 0 5px 0 0 !important;
}

.wpcf7-list-item span {
    display: contents !important;
}

.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap textarea {
/* .your-name input,.tel-818 input,.your-email input,.your-message textarea,.your-nam2 input,.text-693 input,.text-95 input,.text-670 input,.text-585 input,.text-893 input,.text-795 input,.zip input,.pref input,.city input,.text-578 input{ */
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #EA6176;
    padding: 10px;
    border-radius: 6px;
}
label::before{
    content: '●';
    color: #EA6176bf;
}
.wpcf7-submit{
    font-weight: normal;
    color: #333;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, #ff3cac), to(#562b7c));
    background-image: -webkit-linear-gradient(left, #FFB4CD 40%, #FFF5D6 100%);
    background-image: linear-gradient(90deg, #FFB4CD 40%, #FFF5D6 100%);
    border-radius: 100vh;
    padding: 10px 20px;
    margin: 0 auto;
    border: inherit;
    display: block;
}
.wpcf7-submit:after {
    border-radius: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    background-image: -webkit-gradient(linear, left top, right top, from(#ff3cac), color-stop(#562b7c), to(#2b86c5));
    background-image: -webkit-linear-gradient(left, #FFB4CD, #FFD1D1, #FFF5D6);
    background-image: linear-gradient(90deg, #FFF5D6, #FFD1D1, #FFB4CD);
}

.t30 {
    margin-top: 30px;
}

.t60 {
    margin-top: 60px;
}
@media screen and (max-width: 768px) {
    .your-name input,.tel-818 input,.your-email input,.your-message textarea,.your-nam2 input,.text-670 input,.text-585 input{
        width: -webkit-fill-available;
    }
    .wpcf7-form-control-wrap your-name,wpcf7-form-control wpcf7-text wpcf7-validates-as-required,wpcf7-form-control-wrap text-670,wpcf7-form-control-wrap text-585,wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel,wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email,wpcf7-form-control-wrap your-nam2{
        display: flex!important;
        padding: 10px 0;
    }
}
@media screen and (max-width: 500px) {
    footer ul li {
        display: inline-table;
        padding-right: 20px;
    }
}
@media screen and (max-width: 414px) {
    .access{
        padding: 0;
        margin: 0;
    }
    .your-name input, .tel-818 input, .your-email input, .your-message textarea {
        width: 100%;
        padding: 10px 0;
    }
    .access .about_inner {
        padding: 0 30px 0;
    }
    footer p{
        font-size: 12px;
    }
    footer p span {
        border: 1px solid #EA6176;
        border-radius: 10px;
        padding: 3px 10px;
        margin: 10px 0 0;
        vertical-align: middle;
        display: inline-block;
    }
    
}

/********** 

　お知らせ 

**********/
#news_container{
    background-color: #fffaf3;
    padding: 60px 30px;
}
#news_container h2{
    margin-bottom: 30px;
}
.newsarchive_inner{
    display: table;
    max-width: 1200px;
    margin: 0 auto;
}
.newsarchive_inner section{
    display: table-cell;
    vertical-align: top;
}
.archive_main{
    flex: 2;
}
.entries{
    background-color: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    margin-bottom: 60px;
}
.entries:last-child{
    margin-bottom: 0;
}
#blog_title{
    font-size: 18px;
    color: #EA6176;
    font-weight: bold;
}
.databox{
    margin:10px 0;
}
.databox div{
    display: table-cell;
}
.cat-data::before{
    content: 'カテゴリー：';
}
.cat-data{
    padding-right: 30px;
}
.blog_txt{
    margin: 40px 0;
}
.blog_txt p{
    font-size: 15px;
    line-height: 2em;
}
.entry_navi ul{
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
}
.entry_navi ul li{
    display: block;
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
    list-style: none;
}

/**サイドバー**/
#sidebar{
    max-width: 300px;
    width: auto;
    margin-left: 60px;
}
#sidebar h3{
    font-size: 20px;
    text-align: left;
    margin-top: 0;
}
#sidebar section{
    display: table;
}
.side_sec ul{
    margin-left: 20px;
}
 .entry_navi li.prev{
        text-align: left;
    }
    .entry_navi li.next{
        text-align: right;
    }
@media screen and (max-width: 1024px) {
    #news_container {
        padding: 10px 30px;
    }
}
@media screen and (max-width: 768px) {
    .newsarchive_inner{
        display: inherit;
    }
    #sidebar {
        max-width: inherit;
        width: auto;
        margin: 30px 30px;
    }
    #sidebar li {
        list-style: none;
    }
    .newsarchive_inner section{
        display: inherit;
    }
    .entry_navi ul li{
        display: inherit;
    }
}
@media screen and (max-width: 425px) {
    .entries{
        padding: 30px;
    }
    .databox div {
        display: inherit;
    }
    .blog_txt {
        margin: 20px 0;
    }
    .entry_navi ul li {
        display: list-item;
        list-style: none;
    }
    #news_container {
        padding: 30px 30px;
    }

}
/********** 

　ボタン 

**********/
.btn {
    display: table;
    flex: 1 1 auto;
    margin: 0 auto;
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: #fff !important;
    /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
    box-shadow: 0 0 20px #eee;
    border-radius: 40px;
}

.about_box a.btn {
    text-decoration: none;
    /* color: #333; */
}

.btn:hover {
    background-position: right center;
    /* change the direction of the change here */
}

.btn-4 {
    background-image: linear-gradient(to right, #87b5ff 0%, #87b5ff 51%, #87b5ff 100%);
}

.btn-5 {
    background-image: linear-gradient(to right, #28c76f 0%, #28c76f 51%, #28c76f 100%);
}

.btn-6 {
    background-image: linear-gradient(to right, #f6416c 0%, #f6416c 51%, #f6416c 100%);
}

/**グラデ**/
.gbtn,
a.gbtn {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    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;
    color: #333;
    border-radius: 0.5rem;
}

a.btn-gradient-header {
    font-weight: normal;

    color: #fff;
    border-radius: 0;
    background-color: #f6416c;
    border-radius: 100vh;
}
@media screen and (max-width: 425px) {
    
}


a.btn-gradient {
    font-weight: normal;

    color: #333;
    border-radius: 0;
    background-image: -webkit-gradient(linear,
            left top,
            right top,
            color-stop(40%, #ff3cac),
            to(#562b7c));
    background-image: -webkit-linear-gradient(left, #FFB4CD 40%, #FFF5D6 100%);
    background-image: linear-gradient(90deg, #FFB4CD 40%, #FFF5D6 100%);
    border-radius: 100vh;
}

a.btn-gradient:after {
    border-radius: 100vh;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: "";
    -webkit-transition: all 0.5s;
    transition: all 0.5s;

    background-image: -webkit-gradient(linear,
            left top,
            right top,
            from(#ff3cac),
            color-stop(#562b7c),
            to(#2b86c5));

    background-image: -webkit-linear-gradient(left, #FFB4CD, #FFD1D1, #FFF5D6);
    background-image: linear-gradient(90deg, #FFF5D6, #FFD1D1, #FFB4CD);
}

a.btn-gradient span {
    position: relative;
    z-index: 1;
}

a.btn-gradient:hover {
    color: #fff;
}

a.btn-gradient:hover:after {
    opacity: 0;
}
@media screen and (max-width: 425px) {
    
}
/***/
.line_btn,
a.line_btn,
button.line_btn {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 4rem;
    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;
    color: #212529;
    border-radius: 0.5rem;
}

a.btn-svg {
    font-weight: 700;
    line-height: 54px;
    width: 254px;
    height: 54px;
    padding: 0;

    cursor: pointer;
    text-decoration: none;

    background-color: transparent;
}

a.btn-svg svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a.btn-svg svg rect {
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;

    stroke: #EA6176;
    stroke-width: 2;
    stroke-dasharray: 200px, 16px;
    stroke-dashoffset: 70px;
}

a.btn-svg:hover svg rect {
    stroke-dashoffset: 284px;
}

a.btn-svg span {
    color: #EA6176;
}

/*アニメーション*/
.fadeInUp{
    -webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;-webkit-animation-name:fadeInUp;animation-name:fadeInUp;visibility:visible !important
}
@-webkit-keyframes fadeInUp{
    0%{
    opacity:0;-webkit-transform:translateY(30px)
    }
    100%{opacity:1;-webkit-transform:translateY(0)
    }
}
@keyframes fadeInUp{
    0%{
        opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)
    }
    100%{
        opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)
    }
}
/**順番に表示**/
.bf{opacity:0;-webkit-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
.bf.active:nth-child(1){-webkit-animation:bookfade .4s ease .15s 1 forwards;animation:bookfade .4s ease .15s 1 forwards}.bf.active:nth-child(2){-webkit-animation:bookfade .4s ease .3s 1 forwards;animation:bookfade .4s ease .3s 1 forwards}.bf.active:nth-child(3){-webkit-animation:bookfade .4s ease .45s 1 forwards;animation:bookfade .4s ease .45s 1 forwards}.bf.active:nth-child(4){-webkit-animation:bookfade .4s ease .6s 1 forwards;animation:bookfade .4s ease .6s 1 forwards}.bf.active:nth-child(5){-webkit-animation:bookfade .4s ease .75s 1 forwards;animation:bookfade .4s ease .75s 1 forwards}.bf.active:nth-child(6){-webkit-animation:bookfade .4s ease .9s 1 forwards;animation:bookfade .4s ease .9s 1 forwards}.bf.active:nth-child(7){-webkit-animation:bookfade .4s ease 1.05s 1 forwards;animation:bookfade .4s ease 1.05s 1 forwards}.bf.active:nth-child(8){-webkit-animation:bookfade .4s ease 1.2s 1 forwards;animation:bookfade .4s ease 1.2s 1 forwards}.bf.active:nth-child(9){-webkit-animation:bookfade .4s ease 1.35s 1 forwards;animation:bookfade .4s ease 1.35s 1 forwards}.bf.active:nth-child(10){-webkit-animation:bookfade .4s ease 1.5s 1 forwards;animation:bookfade .4s ease 1.5s 1 forwards}.bf.active:nth-child(11){-webkit-animation:bookfade .4s ease 1.65s 1 forwards;animation:bookfade .4s ease 1.65s 1 forwards}.bf.active:nth-child(12){-webkit-animation:bookfade .4s ease 1.8s 1 forwards;animation:bookfade .4s ease 1.8s 1 forwards}.bf.active:nth-child(13){-webkit-animation:bookfade .4s ease 1.95s 1 forwards;animation:bookfade .4s ease 1.95s 1 forwards}.bf.active:nth-child(14){-webkit-animation:bookfade .4s ease 2.1s 1 forwards;animation:bookfade .4s ease 2.1s 1 forwards}.bf.active:nth-child(15){-webkit-animation:bookfade .4s ease 2.25s 1 forwards;animation:bookfade .4s ease 2.25s 1 forwards}.bf.active:nth-child(16){-webkit-animation:bookfade .4s ease 2.4s 1 forwards;animation:bookfade .4s ease 2.4s 1 forwards}.bf.active:nth-child(17){-webkit-animation:bookfade .4s ease 2.55s 1 forwards;animation:bookfade .4s ease 2.55s 1 forwards}.bf.active:nth-child(18){-webkit-animation:bookfade .4s ease 2.7s 1 forwards;animation:bookfade .4s ease 2.7s 1 forwards}.bf.active:nth-child(19){-webkit-animation:bookfade .4s ease 2.85s 1 forwards;animation:bookfade .4s ease 2.85s 1 forwards}.bf.active:nth-child(20){-webkit-animation:bookfade .4s ease 3s 1 forwards;animation:bookfade .4s ease 3s 1 forwards}.bf.active:nth-child(n+21){-webkit-animation:bookfade 0.4s ease 4s 1 forwards;animation:bookfade 0.4s ease 4s 1 forwards}@-webkit-keyframes bookfade{100%{opacity:1}}@keyframes bookfade{100%{opacity:1}}


/** 旧動画 **/
.movies,
.movies-sp {
    margin: 0 auto 20px;
    text-align: center;
    font-size: 14px;
    color: #ea6176;
}

.movies ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    display: table;
    text-align: left;
}
.movies a {
    text-decoration: none;
}
.movies span {
    display: table;
    border: 1px solid #ea6176;
    border-radius: 10px;
    padding: 3px 10px;
    margin: 15px auto 30px;
    vertical-align: middle;
    padding: 0 30px;    
}

@media screen and (max-width: 580px)  {
.movies-sp {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
}
.movies-sp iframe{
position: absolute;
top: 0;
right: 0;
bottom 10px;
width: 100% !important;
height: 100% !important;
}
}


/** 動画 new! **/

*:before, *:after {
	box-sizing: border-box;
}
.col_3{
    display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	width: 100%;
    text-align: center;
    color: #ea6176;
}
.col_3 > div{
    margin: auto;
    padding: 10px;
    width: 30%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
@media screen and (max-width: 1200px) {
.col_3 > div{
    width: 47%;
	}
}
@media screen and (max-width: 800px) {
.col_3 > div{
    width: 100%;
	}
}

.system {
    width: 100%;
    text-align: center;
}

.img-sp {
    display: none;
}

@media screen and (max-width:800px) {
    .img-pc {
        display: none;
    }

    .img-sp {
        display: block;
    }
}



/** グループリンク **/
.col_2{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.col_2 > *{
	width: calc( 50% - 6px ) ;
	margin-right: 12px;
	margin-bottom: 12px;
}
.col_2 > *:nth-child(2n){
	margin-right: auto;
}
.col_2 > * > *{
	height: 100%;
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.col_2 > *{
		width: 100%;
		margin-right: auto;
	}
}

/** 寮生記事 **/
.head_bg--dormitory h2 p{
    font-size: 1rem;
}
.dormitory_profile{
    background: linear-gradient(to bottom, #F1FDFE, #FDF7DA);
    padding: 56px 24px 24px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 80px;
    border-radius: 12px;
    gap: 24px;
}
.dormitory_profile_inner{
    background-color: var(--bgwhite-color);
    padding: 8px 24px;
}

.dormitory_profile .about_box:first-child{
    width: 100%;
}

.dormitory_profile .about_box:last-child{
    max-width: 300px;
}

.dormitory_profile .about_box img{
    width: 100%;
}

.dormitory_profile .about_box{
    padding: 40px 16px;
}

.dormitory_profile .about_box p{
    font-size: 18px;
    text-align: center;
    padding: 0;
}

.dormitory_profile .tbl-r02 th{
    width: auto;
    display: inline;
}
.dormitory_profile ul{
    text-align: inherit;
    padding: 0;
}
.dormitory_profile ul li{
    margin: inherit;
}

.dormitory_block{
    max-width: 1000px;
    margin: 0 auto;
}

.dormitory_block h3{
    font-size: 23px;
    font-weight: normal;
    text-align: left;
    padding-top: 50px;
    line-height: 1.2em;
}

.dormitory_block h3:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 5px;
    background-image: url(../images/border_b.png);
    background-size: contain;
    vertical-align: middle;
    border-radius: 20px;
}

.dormitory_block:last-child{
    padding-bottom: 100px;
}

.dormitory_inner {
    display: flex;
    gap: 24px;
    p{
        width: 100%;
    }
}

.dormitory_inner img {
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 240px;
    object-fit: cover;
}

/* 画面幅が768px以下のとき、テキストと画像を縦並びに */
@media (max-width: 768px) {
    .dormitory_inner {
        flex-direction: column;
        align-items: center; /* 画像とテキストを中央揃えにする */
    }

    .dormitory_inner img {
        width: 80%; /* モバイルの場合、画像を縮小 */
    }
}


@media screen and (max-width: 425px) {
    .dormitory_profile{
        flex-direction: column;
        padding: 24px 24px 24px;
        gap: 46px;
    }

    .dormitory_profile .about_box:first-child,.dormitory_profile .about_box:last-child{
        width: 100%;
        box-sizing: border-box;
        max-width: inherit;
        padding: 24px 16px;
    }

    .dormitory_profile .about_box small{
        display: inline;
    }

    .dormitory_block{
        padding: 0 30px;
    }
}
@media screen and (max-width: 375px) {
    .dormitory_profile{
        gap: 24px;
    }
}

/** 島外生記事 **/
.heading_island {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

.heading_island::before,
.heading_island::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #3ebce6;
}

.heading_island::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.heading_island::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

/** スマホ用OCボタン **/
.ocbtn_pc {
	margin-top: -10px;
	display: block !important;
}

.ocbtn_sp {
	display: none !important;
}

.ocbtn_sp a{
    text-decoration: none !important;
}

@media only screen and (max-width: 425px) {
.ocbtn_pc { display: none !important; }
.ocbtn_sp { display: block !important; }
}

/** お問い合わせ **/
.accesscont {
    display: flex;
    justify-content: center;
}
.accesscont .item {
    margin: 1em;
}
.accesscont h3 {
    font-size: 1.5em;
}
.accesscont h4 {
    background-color: #ffe2a3;
    border-radius: 5px;
    font-size: 1em;
}
.accesscont a {
    text-decoration: none;
    color: #333;
}
.contact_tel a {
    text-decoration: none;
}
.accesscont p {
    text-align: left;
}
@media screen and (max-width: 768px) {
.accesscont {
    flex-wrap: wrap;
}
.accesscont .item {
    width: 220px;
}
}

/** コラムバナー **/
.columnBnr{
    padding: 20px 20px 0;
    text-align: center;
}

/*-----タブ -----*/ 
.fix-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
}

.fix-nav ul {
  display: flex;
}

.fix-nav ul li {
  width: 50%;
  background: #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  list-style: none;
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 0;
}

.fix-nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  text-decoration: none;
}

.fix-nav ul li.fix-nav-oc a {
  background: #28c76f;
  color: #fff;
}

.fix-nav ul li.fix-nav-request a {
  background: #f6416c;
  color: #fff;
  letter-spacing: 0.05em;
}

.fix-nav ul li.fix-nav-oc a span {
  margin-right: 5px;
  font-size: 30px;
}


@media screen and (min-width: 768px) {  /*--- PC SET ---*/
  .fix-nav {
    position: fixed;
    top: 215px;
    left: auto;
    bottom: auto;
    right: 0;
    z-index: 1500;
    width: 50px;
  }
  
  .fix-nav ul {
    display: flex;
    flex-direction: column;
  }
  
  .fix-nav ul li {
    width: 50px;
    height: auto;
    color: #fff;
    writing-mode: vertical-rl;
  }
  
  .fix-nav ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 50px;
    padding: 10px 0;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
  }

  .fix-nav ul li a:hover {
    opacity: 0.5;
  }
  
  .fix-nav ul li.fix-nav-oc a span {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 30px;
  }
}

/*----- OCカレンダー -----*/ 
.pics {
	width: auto;
	margin: 0 0 -30px 0;
 }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important; }
 }
 
.oc_title_05 h5{
    border-left: 3px solid var(--ocgreen-color);
    color: var(--ocgreen-color);
}
.oc_title_03 h5{
    border-left: 3px solid var(--ocpurple-color);
    color: var(--ocpurple-color);
}

#oc .schedulepdf{
    min-width: 240px;
}
 
.cal_wrapper {
    max-width: 960px;
    min-width: 300px;
    padding-left: 24px;
}

.googlecal {
position: relative;
padding-bottom: 150%;
margin-bottom: 60px;
height: 0;
}

.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

@media only screen and (min-width: 768px) {
.googlecal { 
padding-bottom: 80%;
margin-bottom: 0;
 }
}

/*----- OC -----*/ 
.oc_cal_txt{
margin: 12px 0 48px;
}

@media(max-width: 768px){
    .oc_cal_txt{
        margin: -36px 0 48px;
    }
    .cal_wrapper{
        padding-left:0;
    }
}

.oc_wrapper{
  max-width: 980px;
  margin-bottom: 48px;
  padding: 32px;
  background: rgba(255,255,255,0.8);
  border-radius: 16px;
  text-align: justify;
}


.oc_01{
float: left;
margin-right: 32px;
margin-bottom: 24px;
}

@media(max-width: 1280px){
    .oc_01{
    float: none;
    margin-right: 0;
    }
    .oc_01 img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    }
}

.oc_wrapper img{
box-shadow:none
}

.guidance{
    .fas{
        margin-left: 0;
    }
}

.oc_01_txt,
.oc_02_txt,
.oc_03_txt{
margin-top: 36px;
}

@media(max-width: 1280px){
    .oc_01_txt{
    margin-top: 24px;
    }
}
@media(max-width: 768px){
    .oc_wrapper{
        padding: 24px;
    }
    .examination_about table{
        width: 100%;
        min-width: inherit;
    }
}

.oc_title_01 h5 {
  color: #f6416c;
}

.oc_title_02 h5 {
    border-left: 3px solid #0c91cf;
    color: #0c91cf;
}

.oc_title_04 h5 {
    border-left: 3px solid #2e3192;
    color: #2e3192;
}

.ocstaff_title_04 {
  margin-bottom: 48px;
}

.ocstaff_title_04 h5 {
    border-left: 3px solid #2e3192;
    color: #2e3192;
}


.oc_wrapper h5::before {
    content: "";
    width: 0;
}

.oc_01_txt h6,
.oc_02_txt h6,
.oc_03_txt h6,
.oc_04_txt h6{
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 8px;
  font-size: 13px;
  color: #fff;
}

.oc_01_txt h6 {
    background: #f6416c;
    border-radius: 4px;
}

.oc_02_txt h6 {
  background: #0c91cf;
}

.oc_03_txt h6 {
  background: #a11ca4;
}

.guidance ul li {
    font-weight: normal;
}
.block{
    max-width: 900px;
    padding: 0 24px;
    margin: 0 auto;
}
.wideblock{
    max-width: 1200px;
    padding: 0 24px;
    margin: 0 auto;
}
.block_p{
    padding: 0 24px;
}
ul.custom-list {
    list-style: none; /* デフォルトのリストマーカーを消す */
    padding: 0;
    margin: 0;
}

ul.custom-list li {
    position: relative;
    padding-left: 30px; /* アイコンの分だけ左に余白を作る */
    margin-bottom: 8px; /* アイテム間の間隔を設定 */
    text-indent: inherit;
}

ul.custom-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 12px;
    transform: translateY(-50%);
    width: 20px; /* アイコンのサイズ */
    height: 20px;
    background-image: url("../images/check.svg"); /* アイコンのパスを指定 */
    background-size: contain;
    background-repeat: no-repeat;
}

.step_container {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    justify-content: center; /* 矢印を水平方向に中央に配置 */
    align-items: stretch; /* 高さを親要素に揃える */
    position: relative; /* 矢印を絶対位置で配置するために相対位置にする */
    margin-bottom: 24px; /* ステップ間にスペースを追加 */
}
.step_container--table .step_content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .step_container--table .table-wrap {
    min-width: 800px;
  }

.step_number {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step_number .step_label {
    font-size: 12px;
    color: var(--text-color);
}

.step_number .step_count {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
}

.step_content {
    flex: 1;
}

.step_content h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 150%;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-align: left;
}

.step_content p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.7;
}

.step_divider {
    width: 1px;
    background-color: var(--border-color);
    height: auto; /* 自然な高さにする */
    flex: none; /* flexアイテムの影響を受けないようにする */
    align-self: stretch; /* 親の高さに揃える */
    margin: 0 16px;
}
.dropdown_arrow {
    width: 0;
    height: 0;
    border-left: 10.5px solid transparent; /* 左側の三角部分 */
    border-right: 10.5px solid transparent; /* 右側の三角部分 */
    border-top: 12px solid var(--primary-color); /* ▼の色を設定 */
    position: absolute;
    left: 50%; /* 親要素の中央に配置 */
    transform: translateX(-50%); /* 完全に中央に揃える */
    top: 100%; /* 親要素の下に配置 */
    margin-top: 8px; /* 矢印とステップの間隔を調整 */
}
.schedule_container {
    display: grid;
    gap: 16px;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
}

.schedule_card {
    width: 100%;
    padding: 24px 16px;
    border-radius: 8px;
    border: 1px solid #E3E3E3;
    text-align: center;
    gap: 24px;
    display: grid;
    box-sizing: border-box;
}
.schedule_card.faded {
    .schedule_tag.highlight {
        background: #e4e4e4;
        color: var(--text-color);
    }
    .schedule_date.highlight{
        color: #999; 
    }
}
.schedule_closed {
    background: #333;
    color: white;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
}
.schedule_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.schedule_label {
    font-size: 30px;
    font-weight: 700;
    color: #EA6176;
    line-height: 30px;
}
.schedule_heading {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}
.schedule_tag {
    background: #F8F0DD;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 8px;
}
.schedule_tag.highlight {
    background: var(--primary-color);
    color: var(--textwhite-color);
    font-weight: bold;
}

.schedule_date {
    font-size: 16px;
    font-weight: 400;
    color: #333;
}
.schedule_date.highlight{
    font-weight: bold;
    color: var(--primary-color);
}
.exam_container {
    display: grid;
    gap: 16px;
    justify-content: space-between;
    grid-template-columns: repeat(4, 1fr);
}

.exam_card {
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #E3E3E3;
    display: grid;
    place-items: center;   /* ← これで縦横中央揃え */
    gap: 8px;
    box-sizing: border-box;
}

.exam_icon {
    width: 32px;
    height: 32px;
    position: relative;
}

.icon_shape {
    position: absolute;
}

.icon_shape.small {
    width: 25px;
    height: 25px;
    left: 4px;
    top: 3px;
}

.icon_shape.medium {
    width: 29px;
    height: 23px;
    left: 2px;
    top: 5px;
}

.icon_shape.large {
    width: 26px;
    height: 25px;
    left: 3px;
    top: 3px;
}

.icon_shape.square {
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
}

.exam_text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.exam_title {
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #333;
}

.exam_note {
    font-size: 12px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #333;
}


/* スマホ対応 */
@media (max-width: 768px) {
    .schedule_container {
        grid-template-columns: repeat(2, 1fr);
    }
    .exam_container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .schedule_container{
        grid-template-columns: 1fr;
    }
    .schedule_card {
        width: 100%; /* 1列 */
    }
    .exam_container {
        grid-template-columns: 1fr;
    }
}

/* スケジュール全体のスタイル */
.schedule_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
}
/* 各行のスタイル */
.schedule_row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}
/* 時間のカラム */
.schedule_column_time {
    width: 120px;
    color: #333333;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 27.2px;
    word-wrap: break-word;
}
/* イベントのカラム */
.schedule_column_event {
    color: #333333;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 27.2px;
    word-wrap: break-word;
}
/* 区切り線 */
.schedule_line {
    width: 100%;
    height: 0;
    border-top: 1px solid #E3E3E3;
}
.entry_method {
    display: flex;
    gap: 24px; /* 横に並ぶ要素の間隔 */
    justify-content: space-between;
}
.required_documents_list {
    min-width: 290px;
    height: 100%;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #FEF7F7;
    border-radius: 8px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: inline-flex;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .entry_method {
        display: inherit;
    }
    .required_documents_list{
        margin-top: 24px;
        min-width: inherit;
    }
}
.required_documents_title {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    word-wrap: break-word;
}
.request-form-button {
    width: 100%;
    height: 48px;
    padding: 8px 24px;
    background: var(--primary-color);
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
/* Hover時のアニメーション */
.request-form-button:hover {
    background-color: var(--primary-color-dark, #d43957); /* 少し濃い色に変化 */
    opacity: 0.7; /* 透明度を70%に設定して薄くする */
}

.request-form-text {
    color: var(--textwhite-color);
    font-size: 16px;
    font-family: YuGothic, sans-serif;
    font-weight: 700;
    line-height: 15px;
    word-wrap: break-word;
}
.fas {
    font-weight: 900;
    margin-left: 24px;
}
/*OC*/
.merit {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.merit .merit_text {
    margin-bottom: 50px;
}

.merit .merit_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: center;
}

.merit .merit_item {
    background: #f3b2c3;
    border: 4px dotted #EA6176;
    text-align: center;
    padding: 30px 20px 20px;
    position: relative;
    width: 30%;
    min-height: 150px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.merit_item .merit_item_number {
    display: block;
    width: 80px;
    height: 80px;
    background: url(https://awaji-kango.jp/hmw-awaji/wp-content/uploads/2025/03/tamanegi.png);
    background-size: cover;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
}

.merit_item .merit_item_number::after {
    content: attr(data-number);
    position: absolute;
    top: 0;
    right: 0;
    bottom: -8px;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.4rem;
    color: #333;
    opacity: 0.7;
}

/* 各アイテムに data-number を追加 */
.merit_item:nth-child(1) .merit_item_number { content: attr(data-number); }
.merit_item:nth-child(2) .merit_item_number { content: attr(data-number); }
.merit_item:nth-child(3) .merit_item_number { content: attr(data-number); }
.merit_item:nth-child(4) .merit_item_number { content: attr(data-number); }
.merit_item:nth-child(5) .merit_item_number { content: attr(data-number); }

.merit_item .merit_item_text {
    color: #fff;
    letter-spacing: -0.1rem;
}

.merit_item .merit_item_text .emp {
    color: #333;
    font-size: 1.4rem;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
    .merit .merit_item {
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    .merit .merit_item {
        width: 100%;
    }
}
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
  }
  
  .cmn-t-table {
    width: 100%;
    min-width: 600px; /* これがあると崩れにくい、調整可能 */
    border-collapse: collapse;
  }

.cmn-t-table tr:nth-child(7) td {
    padding: 30px 10px;
}

.cmn-t-table tr th {
    background: #F7BDC1;
}

.cmn-t-table tr th,
.cmn-t-table tr td {
    color: #555;
    padding: 10px;
    min-width: auto;
    width: auto;
    border: 1px solid gray;
    text-align: center;
}

.pickup_block {
    display: flex;
    justify-content: space-between; /* 2列にスペースを均等に */
    gap: 20px; /* アイテム間の隙間 */
    align-items: center; /* アイテムを縦方向で中央に配置 */
    flex-wrap: wrap; /* 小さな画面でラップさせる */
}
.about_txt, .about_img {
    flex: 1 1 48%; /* 各要素が48%の幅を占める */
}
.about_txt img {
    max-width: 100%; /* 画像が親要素を超えないように */
    height: auto;
}
/* モバイル用レスポンシブ */
@media (max-width: 768px) {
    .about_txt, .about_img {
        flex: 1 1 100%; /* モバイルでは縦並び */
    }
}

.flex-row {
    display: flex;
    justify-content: space-between; /* アイテム間にスペースを均等に */
    align-items: start; /* アイテムの高さを親要素に合わせて伸ばす */
    gap: 20px; /* アイテム間に隙間 */
}
.flex-row-inner {
    flex: 1 1 48%; /* 各要素が親要素の48%の幅に */
    box-sizing: border-box; /* パディング・ボーダーの幅も考慮 */
}
.guidebook p,.leaflet p{
    font-size: 15px;
    font-weight: 700;
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
}
.guidebook a, .leaflet a{
    text-decoration: none;
}
@media (max-width: 768px) {
    .flex-row {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左揃えに変更 */
    }
    .flex-row-inner {
        flex: 1 1 100%; /* 各要素が親要素の100%の幅に */
        margin-bottom: 40px; /* 各要素の間に隙間を追加（任意） */
        width: 100%;
    }
    .guide{
        display: flex;
    }
}
.flex-row-3col {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start; /* space-between から変更 */
    align-items: stretch; /* 高さを揃える */
}

.flex-row-3col-inner {
    width: calc(33.333% - 27px); /* 固定幅にして均等に */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* 中身を縦に積む */
    justify-content: space-between; /* 必要なら下の余白を押し下げる */
    img{
        width: 100%;
    }
}

/* タブレットで2列 */
@media (max-width: 1024px) {
    .flex-row-3col-inner {
        width: calc(50% - 20px);
    }
}

/* スマホで1列 */
@media (max-width: 640px) {
    .flex-row-3col {
        flex-direction: column;
        gap: 32px;
    }

    .flex-row-3col-inner {
        width: 100%;
    }
}

.feature img{
    max-width: 600px;
    width: 100%;
}

.economic-support {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.economic-support li {
    width: calc(33.333% - 14px); /* 3列 */
    box-sizing: border-box;
    position: relative;
    padding-left: inherit;
}


/* 中画面（タブレット）で2列 */
@media screen and (max-width: 1024px) {
    .economic-support li {
        width: calc(50% - 10px);
    }
}

/* 小画面（スマホ）で1列 */
@media screen and (max-width: 640px) {
    .economic-support li {
        width: 100%;
    }
}
.section-nav {
    padding: 0 16px;
    text-align: center;
}

.section-nav ul {
    display: inline-flex; /* ここで中央寄せに */
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    font-size: 13px;
    gap: 16px; /* liの間隔をgapで管理 */
    position: relative;
}

/* 各リスト項目 */
.section-nav li {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
}

/* 点線の縦線：最後以外に表示 */
.section-nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -8px; /* gapの半分 */
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    border-left: 1px dotted #ccc;
}

/* リンク内のレイアウト */
.section-nav a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* テキストとアイコンの間隔 */
.section-nav span {
    margin-right: 4px;
}

/* SVGアイコンサイズ */
.section-nav svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}
#policy,#qualification,#ao,#schedule,#selection,#exam-fee,#entry,#result {
    scroll-margin-top: 200px; /* ヘッダーの高さに応じて調整 */
  }
  
/*余白*/
.mb80 {
    margin-bottom: 80px;
}
.mb64 {
    margin-bottom: 64px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb24 {
    margin-bottom: 24px;
}
.mb16 {
    margin-bottom: 16px;
}
.mb8 {
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .mb80 {
        margin-bottom: 64px;
    }
    .mb64 {
        margin-bottom: 40px;
    }
    .mb40 {
        margin-bottom: 24px;
    }
    .mb24 {
        margin-bottom: 16px;
    }
}

.width-text{
    padding: 0 16px;
}