@charset "UTF-8";
@import 'css/cut.css';
/*
 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を記入していきましょう。*/

#content {position:relative;}

.balloon{text-align: justify; text-justify: inter-ideograph;word-break: normal;}
.balloon { margin: 40px 0; padding : 0 80px; position: relative;}
.balloon:after,.balloon:before { clear: both; content: ""; display: block;}
.balloon-image-left { position: absolute; left: 0; margin: 0; width: 60px; height: 60px;}
.balloon-image-right { position: absolute; right: 0; margin: 0; width: 60px; height: 60px;}
.balloon figure img { width: 100%; height: 100%; border: 1px solid #aaa; border-radius: 50%; margin: 0;}
.balloon-image-description{ padding: 5px 0 0; font-size: 10px; text-align: center;}
.balloon-text-right { position: relative; margin-left: 0px; padding: 1.5em; border: 1px solid #aaa; border-radius: 5px; float: left; max-width: 100%;}
.balloon-text-left { position: relative; margin-right: 0px; padding:  1.5em; border: 1px solid #aaa; border-radius: 5px; float: right; max-width: 100%;}
.balloon p { margin: 0 0 20px;}
.balloon p:last-child { margin-bottom: 0;}
/* 会話 */
.balloon-text-right:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #aaa; top: 15px; left: -20px;}
.balloon-text-right:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 15px; left: -19px;}
.balloon-text-left:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #aaa; top: 15px; right: -20px;}
.balloon-text-left:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 15px; right: -19px;}

.rectangle{width: 100%;border: 1px solid #aaa;padding: 1em;margin-bottom: 1em;}
.rectangle >figure{margin-bottom: 1em;display:flex;align-items:center;}
.rectangle >figure >figcaption{padding: 5px 0 0 1em;font-size: 11px;text-align: center;}
.rectangle >figure img{border: 1px solid #aaa; border-radius: 50%;width: 45px;}
.rectangle p:last-child{margin-bottom: 0;}

/*プロフィール*/
.profile-balloon{text-align: justify; text-justify: inter-ideograph;word-break: normal;}
.profile-balloon { margin: 40px 0; padding : 0 80px; position: relative;}
.profile-balloon:after,.balloon:before { clear: both; content: ""; display: block;}
.profile-balloon .image-left { position: absolute; left: 0; margin: 0; width: 60px; height: 60px;}
.profile-balloon .balloon-image-right { position: absolute; right: 0; margin: 0; width: 60px; height: 60px;}
.profile-balloon figure img { width: 100%; height: 100%; border: 1px solid #aaa; border-radius: 50%; margin: 0;}
.profile-balloon .balloon-image-description{ padding: 5px 0 0; font-size: 10px; text-align: center;}
.profile-balloon .text-right { position: relative; margin-left: 0px; padding: 10px;border-radius: 5px; float: left; max-width: 100%;padding:1em;}
.profile-balloon p { margin: 0 0 ;font-size:0.8rem;}
.profile-balloon p:last-child { margin-bottom: 0;}
.profile-balloon h4{margin: 0;font-size:1.2rem;}
.profile-balloon h5{font-size:1rem;margin: 0;margin-bottom: 1em;}
.profile-balloon h5 + p{margin-bottom: 1em;}
.profile-balloon .sns {display:flex;flex-wrap:wrap;}
.profile-balloon .sns a{color:#252525;}
.profile-balloon ion-icon{font-size:135%;margin:0 0.25em;}

#tag{
  display: none;
}
.tag-list{padding-bottom: 2em;}
.tag-list{display:flex;flex-wrap:wrap;}
.tag-list li{width: 33.33%;}
.tag-list li a{color:#626262}
.tag-list li { display: none; }

.readMoreBtn {display: none;}
.readMoreBtn {border:1px solid #626262;color:#626262;border-radius:25px;padding: 0.15em 3em;font-weight:bold;margin: 0 auto 3em;}
    
ul.sns_inside{display:flex; justify-content:center;}
.sns_inside li{}
.sns_inside li{font-size:2.6em;line-height: 0;}
.widget ul.sns_inside li a{color:#aca494;}
.textwidget a{color:#626262; font-size: 0.9em;vertical-align: middle;line-height: 1.5;font-weight: bold;}

.contact{margin-bottom: 2em;}
.contact_information{}
.contact small,.imp{color:#58a9ef;}
.imp{margin-left: 0.5em;}
.contact table,.contact td,.contact tr{border:none;}
.contact tr td:first-child{width: 30%;}
.entry-content tr:not(:last-child){border:none;}
.contact input[type="submit"]{background: #aca494;color:#fff;border-radius:30px;padding: 1em 2em;font-weight:bold;min-width:200px;margin: 0.2em;;}
.contact input.contact_back{background: #cccfd7;}
.contact .tp_btn{display: flex;justify-content:center;}

.sidebar .widget_categories .widgettitle:before,.sidebar .my_popular_posts .widgettitle:before{display:none;}
.sidebar #custom_html-4 img{width: 100%;}

/*サイドプロフィール*/
.side_prof{padding: 1em;box-sizing:border-box;border-bottom: 2px solid #f7f7f7;}
.side_prof .side_prof_head{display:flex;align-items:center;margin-bottom: 1em;}
.side_prof .side_prof_head figure{width: 25%;}
.side_prof .side_prof_head figure img { width: 100%; height: auto; border: 1px solid #aaa; border-radius: 50%; margin: 0;}
.side_prof .side_prof_head div{width: 75%;padding-left: 1em;}
.side_prof .side_prof_head div h2{font-size:1.2rem;margin-bottom: 0.35em;line-height:1.4;display:block;}
.side_prof .side_prof_head div h3{font-size:0.8rem;margin-top: 0;margin-bottom: 0;line-height:1.4;;}
.side_prof .side_prof_content dt{font-weight:bold;text-align:center;}
.side_prof .side_prof_content dd{font-weight:;text-align:center;margin-bottom:1em;line-height: 1.4;}
.side_prof .side_prof_content dl dd:last-child{margin-bottom: 0;}
.side_prof .side_prof_content dl{margin-bottom: 0;}

a.head_img:hover{text-decoration:none;}
a[data-stt-changelang] {color:#777;margin:0 7px;}
a[data-stt-active] {color:#fff;text-decoration:none;font-weight:bold;}
.trans{background: #000;;flex-wrap: wrap;display:flex;align-content:center;font-size:0.8rem;margin: 0;position:;right:0;justify-content: flex-end;}
.trans{display: none !important;}
.trans img{width:1.5em;margin-right: 0.5em;}
.trans a{display:flex;align-items:center;}
.stt-lang-select.tl{display:none;}

.hp-link{
  width: 100%;
  display: flex;
  margin: 0 !important;
}
.hp-link li{
  text-align: center;
  width: 50%;
}
.hp-link li.no-link,
.hp-link a{
  padding: 24px 0;
  color: #fff;
  font-weight: bold;
}
.hp-link li.no-link{
  background: #351e00;
}
.hp-link a{
  width: 100%;
  display: block;
  background: #a15c01;
}
.hp-link a:hover{
  opacity: 0.6;
  border: none;
  text-decoration: none;
}

/*board用*/
  #board_inner{padding: 0;}
  .boards { width: 100%; margin: 0 auto;}
  .boards > li {width: 300px;margin: 5px 10px 20px 10px;}
  .boards figure img {width: 100%;margin-bottom:0.3em;display: block;border-radius:1em;transition: .3s;pointer-events: none;-webkit-touch-callout:none;-webkit-user-select:none; -moz-touch-callout:none;-moz-user-select:none;user-select:none;}
  .boards figure figcaption{font-size:0.8em;}
  .boards > li a{color:#000;position:relative;}
  .boards > li a span{position:absolute;background:rgba(0,0,0,0.7);padding:0.15em 1em;font-size: 0.7em;display: block;z-index: 1;color:#fff;font-weight: bold;;}
  .boards > li a:hover{text-decoration: none;} 
  .boards > li a:hover img{scale:1.04;}
  .boards > li small{font-size:0.6em;display: block;line-height:1.2;color:#555;word-break :break-all;}
  .one{display:none;}

  .terms ul{display:flex;justify-content: center;flex-wrap:wrap;max-width: 1180px;justify-content:center;margin: 1em auto;}
  .terms ul li{border-right:1px solid #000;margin-right:1em;padding-right: 1em;line-height: 1;margin-bottom: 0.5em;}
  .terms ul li:last-child{border-right:none;margin-right:0;padding-right: 0;}
  .terms ul li a{color:#000;}
  .tmtitle{text-align: center;font-size:2.5em;}

  .is-loading .board { opacity: 0;}

  .screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100vh;
    background: #f7f7f7;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
  }

  .is-loading .screen {display: flex; }

  .loading {width: 50px;height: 50px;}

  .page-load-status { text-align: center;}

/*xapping用*/
.xapping{text-align:center;}
.xapping h3{font-size:1rem;margin-bottom: 2em;}
.xapping .xp_thumbnails{justify-content: ;}
.xp_movie_staff_info_text_staff_name{text-align:left;}
.xp-list .xp_thumbnails {border:none;padding:0 0 1em 0;}

/*新サイト仮デザイン*/
:root {
  --main-color: #351E00;
  --sub-bg-color: rgba(255, 255, 255, 0.8);
}

/* body.custom-background {
  background-image: url("img/body_bg.jpeg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
} */
body.custom-background {
  position: relative;
  z-index: 0;
  background: none !important;
}
/* body.custom-background::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url("img/body_bg_pc.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; 
} */

body.custom-background::before {
  content: ""!important;
  display: block !important;
  position: fixed !important;
  top: 0!important;
  left: 0!important;
  /* height: 100vh をやめて、上下左右を0で固定する */
  right: 0!important;
  bottom: 0!important;
  
  z-index: -1!important;

  /* 背景画像の設定（PC） */
  background-image: url(img/body_bg_pc.jpg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  
  /* Safariで拡大バグを起こす元凶なので、必ずscroll（または削除） */
  background-attachment: scroll !important;
  
  /* Safariのレンダリングを安定させる呪文 */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* .header, #footer-menu, .drawer__title {
    background-color: transparent !important;
} */
.header-info a,
.my-widget.show_num li:nth-child(1):before,
.my-widget.show_num li:nth-child(2):before,
.my-widget.show_num li:nth-child(3):before,
.my-widget.show_num li:nth-child(4):before,
.my-widget.show_num li:nth-child(5):before{
  background: var(--main-color)!important;
}
.header--center{
  padding: 1.2rem 0 0;
}
.header--center #logo img{
  width: 24%;
  height: auto;
}
/* .desktop-nav li a{
  color: #341E00 !important;
} */
h2{
  margin-top: 2em !important;
}
.sp{
  display: none;
}

@media screen and (max-width: 768px) {
.tag-list li{width: 50%;line-height:1.5;margin: 0.25em 0;}
.tag-list li:nth-child(odd){padding-right: 0.5em;}
.tag-list li:nth-child(even){padding-left: 0.5em;}
.contact table td{width: 100%!important;display: block;}
.contact .tp_btn{display:block;margin: 0 auto;text-align:center;}
.contact input[type="submit"]{min-width: 80%;}

/* body.custom-background::before {
    background-image: url("img/body_bg_sp.jpg") !important;
    height: 100%; 
    min-height: -webkit-fill-available; 
  } */
body.custom-background::before {
    background-image: url(img/body_bg_sp.jpg) !important;
    
    /* 9:16の画像が、最新iPhone(9:19.5など)で拡大されすぎるのを防ぐ */
    /* どうしても拡大が嫌な場合は、ここを 100% 100% に変更してください */
    background-size: cover !important; 
  }

.ll{padding: 0 0 0 80px;}
.rr{padding: 0 80px 0 0 ;}

#custom_html-7{box-sizing:border-box;margin: 0;}
#custom_html-5 {}

.trans{flex-wrap: wrap;font-size:clamp(1vw, 16px, 1.6vw);justify-content: center;padding: 0.5em 0;}
.trans img{width:1.5em;margin-right: 0.5em;}
.trans a{display:flex;align-items:center;}

/*boards*/
.tax-board_category .wrap,
.post-type-archive-board .wrap
{width: 100%;}
.boards{width: 98%;box-sizing: border-box;}
.boards > li {width: 48%;margin:0;margin: 1%;}
.terms{}
.terms ul{width: 100%;overflow: scroll;padding: 1em 1em;flex-wrap: nowrap;justify-content:left;}
.terms ul li{margin-bottom: 0em;}
.terms ul li a{white-space: nowrap;}
.one{display:block;}

/*xapping用*/
.xapping{text-align:center;}
.xapping h2{font-size:1.1rem;}
.xapping h3{font-size:0.9rem;}

.header--center{
  padding: 0.5rem 0 0;
}

.hp-link li.no-link, .hp-link a{
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3em;
}

.pc{
  display: none;
}
.sp{
  display: block;
}

}