@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* ------------------------------------------------------------------------------------
 CTA
------------------------------------------------------------------------------------ */
@media all{
.shiny-btn1 a{color:#1e3fc4;}
.shiny-btn1 a:hover{opacity:0.7;}
.link_btn{text-align:center;}
.link_btn a{display:block;background-color:#ba3635;box-sizing:border-box;padding:30px 40px;color:#fff;box-shadow:0px 3px 16px #ebedef;font-size:120%;font-weight:normal;text-align:center;text-decoration:none!important;margin:10px auto 15px;position:relative;border-radius:8px;clear:both; overflow: hidden}
.link_btn a:after{content:"\f105";position:absolute;font-family:FontAwesome;display:inline-block;font-weight:normal;font-size:140%;right:18px;top:50%;margin-top:-25px;}
.link_btn a:hover{opacity:0.6;}
}
.shiny-btn1:hover {
    text-decoration: none;
    color: #fff;
}
.shiny-btn1::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@font-face{font-family:'FontAwesome';src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}

/* ------------------------------------------------------------------------------------
 デザイン基本
------------------------------------------------------------------------------------ */
.entry-content td:first-child {
    padding: 7px;
    border-right: 2px solid #e0e0e0;
    word-break: break-all;
    /*background-color: #F4F4F4; /* 背景色を指定 */
}

#drawer #drawer__open { right: 0; left: auto;
}

/*ハンバーガーメニュー*/
@media only screen and (min-width: 768px){
#drawer__open {
    display:unset;
	}}

.cat-name {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 13px;
    left: 13px;
    height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 0px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 22px;

    top: 0px;
    left: 0px;
    z-index: 3;

    min-width: 110px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    padding: 0 15px;
}

body {
    --clr-background: #EDF1FA;
    --clr-backgroundb: #505C7E;
    --clr-backgroundg: #F7F7F8;
    --clr-backtransparent: rgba(255, 255, 255, 0);
    --clr-text: #393B3E;
    --clr-link: #467aae;
    --clr-line: rgba(207,214,235,0.6);
    --clr-strong: #E8867F;
    --clr-box-shadow: #DCDCDC;
    --clr-access: #467AAE;
    --clr-comment: #E9EBF2;
    --clr-border: #D6DBEA;
    --clr-menu-table-th: #72727B;
    --clr-menu-table-line: #DCDCDC;
    --clr-menu-table-child: #F4F2F0;
    --clr-five: #865EBC;
    --clr-eight: #5770C4;
    --clr-cv: #E8867F;
    --clr-background-a: #BBE3F3;
    --clr-background-b: #C2C8F4;
    --clr-background-c: #8ec5fc;
}
section.plan {
  background:#FBF8F0;
  color: #333;
}

.background {
    /* padding: 0 25px 25px; */
    position: relative;
    width: 100%;
    margin-top: -60px;
}
.background::after {
  content: '';
  background: #333;
  color: white;
  background: -moz-linear-gradient(top, #60a9ff 0%, #4394f4 100%);
  background: -webkit-linear-gradient(top, #60a9ff 0%,#4394f4 100%);
  background: #FBF8F0;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60a9ff', endColorstr='#4394f4',GradientType=0 );
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.small {
  font-size: 12px;
  /*line-height: 1; /* 行間をデフォルトに設定 */
}

.center{
  text-align: center;
}

.heading06 {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 26px;
  text-align: center;
  margin-top: 5rem;
  color: #35353c;
  letter-spacing: .05em;
  font-weight: 500;
}

.heading06 span {
  position: relative;
  z-index: 2;
}

.heading06::before {
  content: attr(data-en);
  display: block;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80px;
  font-size: 6rem;
  font-family: 'Jost';
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(to right, #91836D 25%, #BCDEF3 75%);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(255, 255, 255, 0);
  z-index: 1;
  transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, letter-spacing;
  overflow: hidden;
  transition-property: opacity, letter-spacing;
  letter-spacing: .05em;
  opacity: 0.23;
}

.heading06::after {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #fa4141;
}

/* アニメーション */
@keyframes slideIn {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  100% {
    letter-spacing: .05em;
    opacity: 0.23;
  }
}

.heading06::before {
  animation: slideIn 1s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.header {
    position: relative;
    z-index: 99;
    box-shadow: none!important;
}

#inner-content .hh30:before {
    position: absolute;
    top: 0;
    left: 0;
    color: #5094C0;
    font-family: FontAwesome;
    font-size: 1em;
    content: "\f00c";
}

@media only screen and (min-width: 481px){
#inner-content p.hh {
    font-size: 1.2em;
}
}
#inner-content p.hh {
    font-size: 1.2em!important;
}

#inner-content .hh24 {
padding: 0 0 0 55px!important
}

.like_img {
    overflow: hidden;
    position: relative;
    width: 110%;
    margin-left: -5%;
    border-radius: 0 0 0% 0%/0 0 0% 0%!important;
    transition: .3s ease-in-out;
}

.like_content p {
    padding-bottom: 10px;
    font-weight: 700;
    text-align: center;
}

.entry-content table td {
   /* vertical-align: top;*/
}

#inner-content .hh.hha:before {
    content: "A" !important;
    background: #cf5c78 !important;
}

.entry-content p:not(.profile) {
    margin: 1.5em 0 1.5em;
}

div#n2-ss-2 .n2-font-e0a34baab56ce0a433b98ba19763e8ff-hover{
  font-family:"Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif!important;
}
div#n2-ss-2 .n2-font-1acb84794621aa13e4eb2dfc106c7b97-paragraph{
  font-family:"Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif!important;
}


#inner-content .hh {
    margin: 1.5em 0 1.5em;
}

#inner-content .hh4 {
    right: 0;
    -webkit-transform: rotate(
-50deg
);
    transform: rotate(
-50deg
);
}

#inner-content .hh24:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 45px;
    height: 0px;
    background-color: black;
    margin: 0.5em 0 0em
}


#inner-content .hh1 {
    padding: 0.5em 0;
    border-bottom: solid 2px #000;
}

#inner-content .hh11 {
   position: relative;
   padding: 0.6em;
   background: #5094C0;
   border-radius: 5px;
   color: #fff;
}

.hh11:after {
    position: absolute;
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border: 15px solid transparent!important;
    border-top: 10px solid #5094C0!important;
    content: "";
}

.entry-content h2 {
  /*padding: 0.5em;/*文字周りの余白*/
  /*color: #494949;/*文字色*/
  /*background: #EDF6FF;/*背景色*/
  /*border-left: solid 5px #5094C0;/*左線（実線 太さ 色）*/
}

.entry-content h2 {
  position: relative;
  margin: 1.5em 0 1.5em;
  line-height: 1.6;
  padding: 1.3em;
  background: #5094C0!important;
  color: #fff;
  text-align: left;
  font-size: 1.5rem;
  margin-top: 2em;
  margin-bottom: 1.5em;
  padding: 25px 15px 25px 35px;
  border-radius: 5px;
}

.entry-content h2:before {
  position: absolute;
  top: 25%;
  left: 15px;
  width: 6px;
  height: 50%;
  content: '';
  opacity: .8;
  border-radius: 3px;
  background: #FFFFFF; /* 白色に変更 */
}

.entry-content h3 {
  /*線の種類（実線） 太さ 色*/
  margin: 1.6em 0 0.7em;
  border-color:#5094C0!important;
  border-bottom: solid 3px #5094C0;
  border-left: none;
}

.entry-content h4 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.entry-content h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5094C0; /*アイコン色*/
  font-weight: 900;
}

#inner-content .hh33 {
  position: relative;
  padding: 1.5rem 1rem;
  background: #FFF;
  color: #5e5e5e;
}

#inner-content .hh33:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#inner-content .hh30:before {
  font-size: 100%;
}

/* ------------------------------------------------------------------------------------
 ランキングページの王冠
------------------------------------------------------------------------------------ */
.crown {
    position: relative;
    padding: 0px 0px 0px 2.5em!important;
    color: #5094C0;
    font-size: 1.3em!important;
}
.crown::before,
.crown::after {
    position: absolute;
    left: 0px;
    width: 0px;
    height: 0px;
    content: "";
}
.crown::before {
    top: -1.25em;
    border: 1em solid transparent;
    border-bottom: 1.5em solid currentColor;
}
.crown::after {
    top: 0.25em;
    border: 0.5em solid transparent;
    border-left: 1em solid currentColor;
    border-right: 1em solid currentColor;
}



/* ------------------------------------------------------------------------------------
 ボタン-切り替えボタン（指定の目次まで飛ばす場合に使用する）
------------------------------------------------------------------------------------ */
.btn-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn_02 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none!important;
  width: 48%;
  margin: auto;
  padding: 1rem 2rem;
  font-weight: bold;
  border: 1px solid #5094C0;
  background: #5094C0;
  color: #fff;
  transition: 0.5s;
  font-weight: normal;
}

.btn_02:hover {
  color: #5094C0;
  background: #fff;
}

.btn_01 {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none!important;
  width: 48%;
  margin: auto;
  padding: 1rem 2rem;
  font-weight: bold;
  border: 1px solid #5094C0;
  color:#5094C0;
  transition: 0.5s;
  font-weight: normal;
}

.btn_01:hover {
  color: #fff;
  background: #5094C0;
}

/* ------------------------------------------------------------------------------------
 セクション設定
------------------------------------------------------------------------------------ */
section .inner {
    margin: 0 auto;
    padding: 2.46vw 2.66vw 3.46vw;
    width: 100%;
    max-width: 1200px;
}
/* ------------------------------------------------------------------------------------
 1カラム幅1280px
------------------------------------------------------------------------------------ */

.one-column #main {
    float: none;
    max-width: 1280px!important;
    width: 100%;
    margin: 0 auto;
    padding-right: 0;
}

.one-column-2 #main {
    float: none;
    max-width: 950px!important;
    width: 100%;
    margin: 0 auto;
    padding-right: 0;
}
 .page-2 #content {
    margin-top: 0em;
}

/* ------------------------------------------------------------------------------------
 表（3列）
------------------------------------------------------------------------------------ */

.entry-content td {
    padding: 10px;
    border: 1px solid #e0e0e0!important;
}

.entry-content tr:not(:last-child) {
    border-bottom: 1px solid #e0e0e0!important;
}

.entry-content table {
    width: 100%;
    margin-bottom: 1.5em;
    border: 1px solid #e0e0e0!important;
}

.entry-content th {
    padding: 7px;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

table.tablearea { border-collapse: collapse; margin-top: 24px; text-align: left; table-layout: fixed; }
.table__scroll { overflow-x: scroll; }
.table__scroll table.tablearea { table-layout: initial; }
table.tablearea th, table.tablearea td { padding: 16px; font-size: 14px; }
table.tablearea th:not(.heading):first-of-type { width: 30%; }
table.tablearea th:not(.heading) { background-color: #F4F4F4; text-align: left; line-height: 1.5; max-width: 150px; min-width: 100px; font-weight: initial !important; }
table.tablearea td { font-weight: 300; line-height: 1.5; border: 1px solid rgb(0, 62, 110); }
table.tablearea td + td { border-left: none; }
table.tablearea th + td { border-left: none; }
table.tablearea th.heading { background-color: #5094C0; font-weight: 300; color: rgb(255, 255, 255); }
table.tablearea th.heading:first-of-type { max-width: 100px; width: 30%; }
table.tablearea th.heading:last-of-type { border-right: 1px solid #5094C0; }
table.tablearea th.heading + .heading { border-left: 1px solid rgb(255, 255, 255); }
table.tablearea[data-type="center"] th, table.tablearea[data-type="left"] td { text-align: left; }
table a { color: rgb(26, 13, 171); text-decoration: underline; }
table.tablearea th.heading .caution { color: rgb(255, 255, 255) !important; }

/* ------------------------------------------------------------------------------------
 BOXデザインのカスタマイズ
------------------------------------------------------------------------------------ */

.box3 {
    margin: 1em 0em!important;
    padding: 1.5em 1em!important;
    background: #F4F4F4;
    color: #2c2c2f;
}

.star {
    display: block;
    margin-bottom: 0.3em;
    text-align: left;
    font-size: 1.1em;
    color: #a99780;
}

.box3 {
    margin: 2em 0;
    padding: 1.5em 1em;
    background: #F7F7F7;
    color: #2c2c2f;
}

.box29 .box-title {
    display: inline-block;
    position: relative;
    top: -2px;
    padding: 2px 9px;
    background: #A6ABB9;
    color: #fff;
    /*font-size: 15px;*/
    line-height: 1.5;
}

.box29 {
    margin: 2em 0;
    border: solid 2px #A6ABB9;
}


/* ------------------------------------------------------------------------------------
 TOPに戻るボタンのカスタマイズ
------------------------------------------------------------------------------------ */
.totop {
    background: #F5DF4D !important;
}

/* ------------------------------------------------------------------------------------
 「Q」のカスタマイズ
------------------------------------------------------------------------------------ */
#inner-content .hh.hhq:before, #inner-content .hh.hha:before {
    content: "Q";
    position: absolute;
    left: 0;
    top: -6px;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    vertical-align: middle;
    text-align: center;
    font-family: Arial,sans-serif;
    font-size: 15px;
    background: #5094C0;
    color: #fff;
    border-radius: 50%;
    border-bottom: #fff!important;
}

#inner-content .hh.hhq, #inner-content .hh.hha {
    position: relative;
    margin: 0;
    padding: 0 0 0 55px;
    font-size: 110% !important;
}

/* ------------------------------------------------------------------------------------
 箇条書きのカスタマイズ
------------------------------------------------------------------------------------ */

.ol-circle li:before {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #5094C0;
    color: #fff;
    font-family: "Quicksand",sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    content: counter(number);
    counter-increment: number;
}
/* ------------------------------------------------------------------------------------
 注意書きのカスタマイズ
------------------------------------------------------------------------------------ */
.memo.alert {
    background: #FFD7D7,transparent 60%;
}

/* ------------------------------------------------------------------------------------
 黄色マーカーのカスタマイズ
------------------------------------------------------------------------------------ */
.keiko_yellow {
    background:linear-gradient(transparent 60%, #fff799 60%);
font-weight:bold;
}



/* ------------------------------------------------------------------------------------
 関連記事
------------------------------------------------------------------------------------ */
.linkto {/*全体*/
    position: relative;/*疑似要素の基準に*/
    max-width: 600px;/*最大の横幅*/
}
.linkto .tbtext::before {
    position: absolute;
    content: "あわせて読みたい";
    top: 10px;
    left: 125px;/*左からの位置*/
    display: inline-block;
    line-height: 26px;
    color: white;
    font-weight: 500;
    background: #CF5C78;
    padding: 0px 8px;
    border-radius: 3px;
}

.linkto:after {/*疑似要素（後）*/
    position: absolute;/*基準を元に*/
    display: flex;/*中の要素を動かせるように*/
    height: 100%;/*背景の高さ*/
    padding: 0px 15px;/*内側の余白（左右15px）*/
    font-family: "Font Awesome 5 Free";
    content: "\f00c";/*アイコンのユニコード*/
    top: 0px;/*上からの位置*/
    right: 0px;/*右からの位置*/
    font-size: 2.8em;/*フォントサイズ*/
    color: #fff;/*文字色*/
    background: #eaedf2;/*背景色*/
    align-items: center;/*中央揃え*/
}
.linkto .tbtext {/*テキスト部分*/
    padding: 30px 62px 0px 10px;/*内側の余白（上右下左）*/
    vertical-align: top;/*上揃えに*/
    font-size: .95em;/*文字の大きさ*/
}

/* ------------------------------------------------------------------------------------
 DIVER点線
------------------------------------------------------------------------------------ */
.entry-content hr {
    margin: 1em 0 !important;
}


/* ------------------------------------------------------------------------------------
 メニュー透過
------------------------------------------------------------------------------------ */
.fixed-menu ul {
  background: rgba(255, 255, 255, 0.8) !important;
}

.fixed-menu .current-menu-item a, .fixed-menu ul li a.active {
    color: #caa66e !important;
}

/*トップページおすすめ*/
#pickup{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:0.5em;
  margin-bottom:2em;
}
#pickup .pickup_post{
  width:24%;
}
@media only screen and (max-width: 767px) {
  #pickup .pickup_post{
    width:48%;
    margin-bottom:1em;
  }
}
#pickup .pickup_post a img{
  box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
  border-radius:2px;
  transition: .3s ease-in-out;
}
#pickup .pickup_post a img:hover{
  box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}

/*トップページの見出し*/
h2.top_menu {
  border-left:none;
  background-color:#fff;
  color:#000;
  overflow: hidden;
  text-align: center;
}
h2.top_menu span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
h2.top_menu span::before,
h2.top_menu span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #000;
}
h2.top_menu span::before {
  right: 100%;
}
h2.top_menu span::after {
  left: 100%;
}
@media only screen and (max-width: 767px) {
  h2.top_menu {
    font-size:1em;
  }
}

/* ------------------------------------------------------------------------------------
引用付BOX
------------------------------------------------------------------------------------ */
.box8  {
    position: relative;
    border: none;
    padding: 40px 10px 10px 15px;
    box-sizing: border-box;
    color: #464646;
    background: #F5F5F5;
}

.box8 :before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0px;
    content: "“";
    font-family: sans-serif;
    color: #DADADA;
    font-size: 90px;
    line-height: 1;
}

.box8  p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.box8  cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* ------------------------------------------------------------------------------------
 続きを読む
------------------------------------------------------------------------------------ */
.hide-text {
    display: none;
}
button.readmore {
    position: relative;
    height: 80px;
    width: 90px;
    margin: 40px auto;
    display: block;
    background-color: transparent;
    color: #666;
    padding-bottom: 40px;
    border: none;
    outline: 0;
    transition: .5s;
    -erbkit-transition: .5s;
}

button.readmore::after {
    content: " ";
    position: absolute;
    width: 30px;
    height: 30px;
    border-top: solid 3px #666;
    border-right: solid 3px #666;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    right: 28px;
    top: 25px;
    transition: .5s;
    -erbkit-transition: .5s;
}

button.readmore:hover::after {
    top: 40px;
}

.on-click {
    color: transparent!important;
}

.on-click {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}

/* ------------------------------------------------------------------------------------
 口コミボックス
------------------------------------------------------------------------------------ */
.good, .ungood {/*ボックス共通部分*/
    /*border: 2px solid #f4f4f5;/*枠線*/

    background: #F4F4F4;
    padding: 1.5em 1em;/*内側余白*/
    margin: 2em 0;/*外側余白*/
}
.good .box-title, .ungood .box-title {/*タイトル部分*/
    display: flex;/*配置しやすい種類に変更*/
    align-items: center;/*縦方向を真ん中に*/
    line-height: 1;/*行の高さ*/
    margin-bottom: 5px;/*外側　下の余白*/
}
.good .box-title, .good .box-title:before {/*タイトルとアイコンの色*/
    color: #35353C;
}
.ungood .box-title, .ungood .box-title:before {/*タイトルとアイコンの色*/
    color: #35353C;
}
.good .box-title:before ,.ungood .box-title:before {/*アイコン*/
    font-family: "font awesome 5 free";/*種類*/
    margin-right: 5px;/*外側　右余白*/
    font-size: 1.7em;/*文字の大きさ*/
}
.good .box-title:before {/*メリットのアイコン*/
    content: "\f599";/*アイコンの種類*/
}
.ungood .box-title:before {/*デメリットのアイコン*/
    content: "\f5c8";/*アイコンの種類*/
}
.yoko {
  display: flex;
}

.yoko .box-title,
.yoko .star {
  margin-right: 10px; /* 適切なマージンを設定 */
}

.good .box-title,
.good .box-title:before,
.ungood .box-title,
.ungood .box-title:before {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 5px;
}

.good .box-title:before,
.ungood .box-title:before {
  font-family: "font awesome 5 free";
  margin-right: 5px;
  font-size: 1.7em;
}

.yoko .box-content {
  width: 100%; /* 幅を100%に設定 */
  margin-top: 10px; /* 適切なマージンを設定 */
}

/* ------------------------------------------------------------------------------------
 ランキング一覧
------------------------------------------------------------------------------------ */
@media all{

.entry-content table{width:100%;margin-bottom:1.5em;border:2px solid #e0e0e0;}
.entry-content tr:not(:last-child){border-bottom:2px solid #e0e0e0;}
.entry-content td{padding:7px;border-right:2px solid #e0e0e0;word-break:break-all;}
.entry-content td:last-child,.entry-content th:last-child{border-right:0;}
.entry-content th{padding:7px;border-right:2px solid #e0e0e0;border-bottom:2px solid #e0e0e0;background-color:#f8f9fa;}
.entry-content img{max-width:100%;height:auto;}
.entry-content .size-full{max-width:100%;height:auto;}
.entry-content .aligncenter,.entry-content img.aligncenter{clear:both;margin-right:auto;margin-left:auto;}
.entry-content img.aligncenter{display:block;}
}

@media all{
.blue{color:#6bb6ff;}
.red{color:#ee7b7b;}
.small,#inner-content .small{font-size:0.75em;}
.big,#inner-content .big{font-size:1.3em;}
}

@media all{
/*.entry-content td{padding:1px!important;}*/
.column-1{z-index:2;}
}
/*! CSS Used from: Embedded */
/*.entry-content table{font-size:12px;}*/
.entry-content th{color:#222;}
table{width:100%;}
.scroll{overflow:auto;white-space:nowrap;}
.scroll::-webkit-scrollbar{height:15px;}
.scroll::-webkit-scrollbar-track{background:#f1f1f1;}
.scroll::-webkit-scrollbar-thumb{background:#bbb;}
.red-shiny{display:inline-block;position:relative;width:96%;padding:1.3em 0.6em;margin:0 2% 0!important;background-color:#ba3635;border-radius:0px;font-weight:bold;color:#fff;text-align:center;text-decoration:none;overflow:hidden;}
.red-shiny a{color:#ffffff!important;text-decoration:none;display:block;}
.red-shiny:hover{text-decoration:none;color:#fff;}
.red-shiny::before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite;}
.scroll::-webkit-scrollbar{display:none;}
.scroll table td{vertical-align:middle;}
.X{line-height:1.2;}
.static{position:sticky;color:#252525;background-color:#F8F9FA;}
.static{left:-2px;padding:10px 5px 3px 5px!important;}
.Y{line-height:1.3;}
.mens th{padding:2px!important;}
.mens td{padding:3px!important;}
/*! CSS Used from: Embedded */
a{color:#4f96f6;}
/*! CSS Used keyframes */
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0;}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5;}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1;}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0;}}
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0;}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5;}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1;}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0;}}
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0;}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5;}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1;}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0;}}


/* ------------------------------------------------------------------------------------
 フロントページカスタマイズ
------------------------------------------------------------------------------------ */
#header-image {
    min-height: 250px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    animation: fadeHeader 1s ease 0s 1 normal;
}
/* ------------------------------------------------------------------------------------
 医師紹介
------------------------------------------------------------------------------------ */

.fb-offset .fb-offset-inner .image {/*background-image: url(../img/clinic/nishinomiya/doctor-001.png);*/background-size: cover;background-position: center;box-shadow: 0px 3px 16px #DCDCDC;margin: 0 0 -5em -2em;width: 100%;width: 100%;/*height: 350px;*/}
.feature-block-offset {margin-bottom: 100px;}
.top {height: 3em;display: grid; grid-template-columns: 8em auto;grid-template-rows: auto;}
.top .first {background: #F7F7F8;}
.top .second {background: #F7F7F8;}
.fb-offset {color: #333;padding: 0;width: 100%;}
.fb-offset .fb-offset-inner {display: flex;flex-direction: column-reverse;background: #F7F7F8;}

.fb-offset .fb-offset-inner .content {padding: 1em 1em 3em;}

.transparent{
  background: #fff;
}


@media (min-width: 960px) {
  .top {height: 6em;}
  .top .first {background: transparent;}
  .fb-offset .fb-offset-inner {display: grid;grid-template-columns: 6em auto auto;grid-template-rows: auto;}
  .fb-offset .fb-offset-inner
  .image {width: 650px;}
}

@media (min-width: 640px) {
  .fb-offset .fb-offset-inner
  .content {padding: 0em 15% 3em;}
  .fb-offset .fb-offset-inner .image {height: 500px;margin: 0 0 -3em -6em;background-position: right top;}
}


@media all{
*,*::before,*::after{box-sizing:border-box;}
div,dl,dt,dd{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
*:focus{outline:none;}
.career_list{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;margin-bottom:px;}
.career_list dl{display:flex;flex-wrap:wrap;width:calc(50% - 30px);margin:0!important;font-size: 16px;line-height: 2;}
.career_list dt{width:70px;margin:0!important;font-weight:500!important;font-size: 16px;line-height: 2;}
.career_list dd{width:calc(100% - 70px);margin:0!important;}
.post_content *:first-child{margin-top:0;}
.post_content *:last-child{margin-bottom:0;}
.post_content dt,.post_content dd{line-height:2.2;}
.post_content dl{margin-bottom:2em;}
.post_content dt{font-weight:bold;}
.post_content dd{margin-bottom:1em;}
}

@media screen and (max-width: 1200px){
@media only screen and (max-width: 800px){
.career_list{margin-bottom:35px;}
.career_list dl{width:auto;font-size:14px;}
.career_list dt{width:60px;margin:0;}
.career_list dd{width:calc(100% - 60px);margin:0;}
}
@media screen and (max-width:800px){
.post_content dt,.post_content dd{line-height:1.8;}
}
}

h3.career_list {
  position: relative;
  padding: 0 65px;
  text-align: center;
  color: #333;
  font-size: 1.5rem;
}

h3.career_list:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #72727B;
}

h3.career_list span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}


/* ------------------------------------------------------------------------------------
 クーポンカード
------------------------------------------------------------------------------------ */
 .price-cards .price-card  b span a{
  color: #FFF;
}

 .price-cards{position:relative;z-index:2;margin-bottom:3rem;}
@media screen and (min-width: 960px){
 .price-cards{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px;}
}
@media screen and (min-width: 960px){
 .price-cards a.price-card:hover{box-shadow:0px 3px 16px var(--clr-main-p);transform:scale(0.95);}
 .price-cards a.price-card:hover .num:before{width:100%;}
}
 .price-cards .price-card{position:relative;display:block;margin-bottom:0rem;padding:0vw;/*background:#fff;border-radius:10px;box-shadow:0px 3px 16px var(--clr-box-shadow);*/color:var(--clr-text);}
@media screen and (min-width: 960px){
 .price-cards .price-card{margin:0 8px;padding:0px;width:calc(33.3333333333% - 16px);}
}
 .price-cards .price-card:hover span, .price-cards .price-card:hover b, .price-cards .price-card:hover p{color:var(--clr-text);}
 .price-cards .price-card:hover .times *{color:#fff;}
 .price-cards .price-card .times{width:19.2vw;height:19.2vw;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:absolute;top:.5rem;left:.5rem;border-radius:50%;background:var(--clr-strong);}
@media screen and (min-width: 960px){
 .price-cards .price-card .times{width:72px;height:72px;}
}
 .price-cards .price-card .times span{font-size:4.8vw;color:#fff;}
@media screen and (min-width: 960px){
 .price-cards .price-card .times span{font-size:18px;}
}
 .price-cards .price-card .times span b{font-family:"Jost";font-size:10.66vw;font-weight:500;padding-right:.2rem;}
@media screen and (min-width: 960px){
 .price-cards .price-card .times span b{font-size:40px;}
}
 .price-cards .price-card h3{margin:0;line-height:1.2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:13.33vw;}
@media screen and (min-width: 960px){
 .price-cards .price-card h3{height:50px;}
}
 .price-cards .price-card strong{color:var(--clr-strong);background:unset;margin-bottom:1rem;margin-top:1rem;font-size: 68px;}
 .price-cards .price-card strong span{line-height:1;}
 .price-cards .price-card .fm{text-align:center;}
 .price-cards .price-card .num{position:relative;}
 .price-cards .price-card .num:before{content:"";height:12px;width:100%;background:var(--clr-main-p);position:absolute;bottom:5px;left:0;right:0;z-index:-1;transition:.2s ease;}

 .price-cards .price-card .img{
  background: url(../img/top/top_bg01.png)left top repeat;
  /*padding: 50px;*/
  display: flex;
  justify-content: center;
  align-items: center;
      border-radius: 0px;
      max-width: 500px;
      margin:0 auto 15px;
}
 .price-cards .price-card:nth-of-type(2) .img{
  background: url(../img/top/top_bg02.png)left top repeat;
}
 .price-cards .price-card:nth-of-type(3) .img{
  background: url(../img/top/top_bg03.png)left top repeat;
}
 .price-cards .price-card:nth-of-type(4) .img{
  background:#FFF;
}
 .price-cards .price-card:nth-of-type(5) .img{
  background:#FFF;
}
 .price-cards .price-card .img img{
  /*border-top: 2px dashed #071949;*/
  /*border-bottom: 2px dashed #071949;*/
  padding: 0px;
  width: auto;
  max-width: 100%;
}
 .price-cards .price-card:nth-of-type(4) .img img{
  /*border-top: 2px dashed #071949;*/
  /*border-bottom: 2px dashed #071949;*/
  padding: 0px;
  width: auto;
  max-width: 100%;
}
 .price-cards .price-card:nth-of-type(5) .img img{
  /*border-top: 2px dashed #071949;*/
  /*border-bottom: 2px dashed #071949;*/
  padding: 0px;
  width: auto;
  max-width: 100%;
}
 .price-cards .price-card:nth-of-type(7) .img img {
    /* border-top: 2px dashed #071949; */
    /* border-bottom: 2px dashed #071949; */
    padding: 0px;
    width: auto;
    max-width: 100%;
}
 .price-cards .price-card .text{
  /* font-size: 16px; */
  margin-bottom: 0;
  position: relative;
    padding-left: 15px;
}
 .price-cards .price-card .text::before{
  position: absolute;
  content: '＊';
  top: 0;
  left: 0;
}
@media screen and (min-width: 960px){
   .price-cards .price-card .text{
    padding-left: 15px;
  }
}

@media all{
.effect-active{visibility:visible;}
.effect-target{opacity:0;}
.effect-top{opacity:0;}
.effect-active{animation:effect-fadeIn .3s ease-out both;}
.effect-target:nth-child( 1){animation-delay:0s!important;}
.effect-target:nth-child( 2){animation-delay:.3s!important;}
.effect-target:nth-child( 3){animation-delay:.6s!important;}
.effect-target:nth-child( 4){animation-delay:.9s!important;}
.effect-target:nth-child( 5){animation-delay:1.2s!important;}
.effect-target:nth-child( 6){animation-delay:1.5s!important;}
.effect-active .effect-slide{animation:effect-slideIn .3s ease-in-out both;}
}

/*! CSS Used keyframes */
@keyframes effect-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes effect-slideIn{from{opacity:0;transform:translateY(5em);}to{opacity:1;transform:translateY(0);}}
@keyframes bgextendAnimeBase{from{opacity:0;}to{opacity:1;}}
@keyframes bgextendAnimeSecond{0%{opacity:0;}100%{opacity:1;}}
@keyframes bgUDextendAnime{0%{transform-origin:top;transform:scaleY(0);}50%{transform-origin:top;transform:scaleY(1);}50.001%{transform-origin:bottom;}100%{transform-origin:bottom;transform:scaleY(0);}}

/* ------------------------------------------------------------------------------------
 HERO
------------------------------------------------------------------------------------ */
.overlay {
  position: absolute;
  width: 100%;
  height: 50vh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, transparentize(#0E1D33, 0.2), transparentize(#0E1D33, 0.8));
}

.hero-slider {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
  position: relative; /* 背景画像のコンテナに相対的な位置を指定 */
}

.hero-slider .carousel-cell {
  width: 40vw;
  height: 50vh;
  margin-right: 10px;
  position: absolute; /* 修正: 要素を重ねるように設定 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s; /* オプション: スライド切り替え時のフェード効果 */
}

/* テキスト要素のスタイル */
.hero-slider .carousel-cell .inner {
  position: absolute; /* 相対的な位置を指定 */
  top: 50%; /* 上端を中央に配置 */
  left: 50%; /* 左端を中央に配置 */
  transform: translate(-50%, -50%); /* 中央揃え */
  color: white;
  text-align: center;
}

.hero-slider .carousel-cell .inner .subtitle {
  font-family: 'Roboto Slab', serif;
  font-size: 2.2rem;
  line-height: 1.2em;
  font-weight: 200;
  font-style: italic;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}

.hero-slider .carousel-cell .inner .title {
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 40px;
}

.hero-slider .carousel-cell .inner .btn {
  border: 1px solid #fff;
  padding: 14px 18px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 3px;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.hero-slider .carousel-cell .inner .btn:hover {
  background: #fff;
  color: #000;
}

.hero-slider .flickity-prev-next-button {
  width: 80px;
  height: 80px;
  background: transparent;
}

.hero-slider .flickity-prev-next-button:hover {
  background: transparent;
}

.hero-slider .flickity-prev-next-button .arrow {
  fill: white;
}

.hero-slider .flickity-page-dots {
  bottom: 30px;
}

.hero-slider .flickity-page-dots .dot {
  width: 30px;
  height: 4px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 0 solid white;
  border-radius: 0;
}

.hero-slider .flickity-page-dots .dot.is-selected {
  background: #ff0000;
  border: 0 solid #ff0000;
}

/* スマートフォンサイズの調整 */
@media screen and (max-width: 1200px) {
  .hero-slider {
    width: 100vw;
    height: calc(100vw * 390 / 680); /* 横幅680px、縦幅390pxの比率 */
    overflow: hidden;
  }

  .hero-slider .carousel-cell {
    width: 100%;
    height: calc(100vw * 390 / 680); /* 横幅680px、縦幅390pxの比率 */
    margin-right: 0;
  }
  .hero-slider .carousel-cell .inner {
    position: absolute; /* 相対的な位置を指定 */
    top: 30%; /* 上端を中央に配置 */
    left: 50%; /* 左端を中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃え */
  }
}


/* ------------------------------------------------------------------------------------
 表レスポンス
------------------------------------------------------------------------------------ */
@media all{
.ani_over{transition:all .3s ease-out;}
@media screen and (min-width:1025px){
a[href^="tel:"]{pointer-events:none;}
.box_container{max-width:1000px;margin:0 auto;}
}
@media screen and (max-width:1024px){
.box_container{margin:0 auto;}
}
}

@media all{
.effect-active{visibility:visible;}
.effect-target{opacity:0;}
.effect-top{opacity:0;}
.effect-active{animation:effect-fadeIn .3s ease-out both;}
.effect-target:nth-child( 2){animation-delay:.3s!important;}
.effect-active .effect-slide{animation:effect-slideIn .3s ease-in-out both;}
.effect-txt{animation-name:bgextendAnimeBase;animation-duration:1s;animation-fill-mode:forwards;position:relative;overflow:hidden;opacity:0;display:inline-block;}
.effect-active .effect-txt-in{animation-name:bgextendAnimeSecond;animation-duration:1s;animation-delay:.6s;animation-fill-mode:forwards;opacity:0;display:inline-block;}
.effect-active .effect-txt-t::before{animation-name:bgUDextendAnime;animation-duration:1s;animation-fill-mode:forwards;content:"";position:absolute;width:100%;height:100%;}
.effect-active h2.effect-txt-t::before{background-color:#37373E;}
}

@media all{
@media screen and (min-width:960px){
.clinic_info.box_container{padding:8vw 0;}
.single_clinic h2{font-size:28px;letter-spacing:.03em;margin:0 auto 3vw;border-bottom:3px solid #4f9c00;padding-bottom:.3em;display:inline-block;}
.single_clinic h2 .small_text{font-size:22px;}
.clinic_info_data{width:100%;margin:0 auto;border-collapse:separate;border-spacing:2px;background:#fff;}
.clinic_info_data th{color:#fff;font-size:16px;font-weight:500;background:var(--clr-menu-table-th);width:260px;padding:18px 15px 18px 40px;text-align:left;box-sizing:border-box;border:none;}
.clinic_info_data td{font-size:14px;font-weight:500;background:var(--clr-menu-table-child);text-align:left;line-height:1.8;letter-spacing:0.03em;padding:18px 15px 18px 40px;border:none;}
a.gmap{width:100px;height:26px;background:var(--clr-strong);color:#fff;font-size:12px;font-weight:400;line-height:24px;text-align:center;margin-top:.5em;display:block;border:1px var(--clr-strong) solid;box-sizing:border-box;}
a.gmap i{display:inline-block;margin-right:.3em;}
a.gmap:hover{background:transparent;color:#E8867F;}
}
@media screen and (max-width:959px){
.clinic_info.box_container{padding-bottom:calc(100vw / ( 750 / 120 ));}
.single_clinic h2{font-size:calc(100vw / ( 750 / 32 ));margin:0 auto calc(100vw / ( 750 / 50 ));border-bottom:3px solid #4f9c00;padding-bottom:.1em;display:inline-block;}
.single_clinic h2 .small_text{font-size:calc(100vw / ( 750 / 26 ));}
.clinic_info{padding-left:calc(100vw / ( 750 / 30 ));padding-right:calc(100vw / ( 750 / 30 ));box-sizing:border-box;}
.clinic_info_data{margin:0 auto;border-collapse:separate;border-spacing:0;background:#fff;}
.clinic_info_data th,.clinic_info_data td{display:block;width:100%;box-sizing:border-box;text-align:left;}
.clinic_info_data th{color:#fff;font-size:calc(100vw / ( 750 / 28 ));font-weight:500;background:#35353C;padding:calc(100vw / ( 750 / 14 )) 0 calc(100vw / ( 750 / 14 )) calc(100vw / ( 750 / 32 ));border:none;}
.clinic_info_data td{font-size:calc(100vw / ( 750 / 26 ));font-weight:500;background:#F4F2F0;text-align:left;line-height:1.8;letter-spacing:0.03em;padding:calc(100vw / ( 750 / 40 )) calc(100vw / ( 750 / 32 ));border:none;}
a.gmap{height:calc(100vw / ( 750 / 52 ));background:#E8867F;color:#fff;font-size:calc(100vw / ( 750 / 24 ));font-weight:400;line-height:calc(100vw / ( 750 / 48 ));text-align:center;margin-top:.5em;display:block;box-sizing:border-box;}
a.gmap i{display:inline-block;margin-right:.3em;}
}
}

.clinic_info_data table {
    border: 0px solid #e0e0e0!important;
}

/*! CSS Used keyframes */
@keyframes effect-fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes effect-slideIn{from{opacity:0;transform:translateY(5em);}to{opacity:1;transform:translateY(0);}}
@keyframes bgextendAnimeBase{from{opacity:0;}to{opacity:1;}}
@keyframes bgextendAnimeSecond{0%{opacity:0;}100%{opacity:1;}}
@keyframes bgUDextendAnime{0%{transform-origin:top;transform:scaleY(0);}50%{transform-origin:top;transform:scaleY(1);}50.001%{transform-origin:bottom;}100%{transform-origin:bottom;transform:scaleY(0);}}

/* ------------------------------------------------------------------------------------
 ランキングカード
------------------------------------------------------------------------------------ */
.entry-content blockquote ul, .entry-content blockquote ol { border: none; padding: 5px 0 5px 20px; margin: 0;
}

.cardtype__article {
    box-shadow: 0px 3px 16px var(--clr-box-shadow);
}

#toc_container .toc_title, .entry-content .ez-toc-title-container {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 5px 0 5px 58px!important;
    font-size: 23px;
    font-weight: bold;
}

#toc_container, #ez-toc-container, .entry-content h3, .li-mainbdr ul, .li-mainbdr ol {
    border-color: #5094C0!important;
}

.labeltext {
    display: inline-block;
    margin-right: 5px;
    padding: 5px;
    color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1;
    border-radius: 5px;
}

h1, .h1 {
    font-size: 1.35em!important;
    line-height: 1.6;
}

@media only screen and (min-width: 481px){
  .rate-box {
      max-width: 1200px!important;
      margin: 0 auto 1em;
      font-size: 17px;
  }

}