html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


body{font-family:Ryumin Regular KL,"リュウミン R-KL",serif,meiryo; line-height: 1.7em; margin:0;padding:0;}
footer { clear: both; margin: 5%}
address { font-style:normal; text-align: center; padding:30px 0;}
address a, .navbox h2 a {text-decoration: none;}
.add {font-size: 12px}
a:link{color:#000;}
li a:link{color:#000; text-decoration: none;}
a:hover{color:#000; text-decoration: underline;}
a:visited{color:#666666;}
p{ clear: both;text-align: justify; }
.ltext {text-decoration: underline!important;}


i {margin-left:15px;color:#ccc;}
.date{font-family: arial narrow; font-size: .9em;}
.date i{margin-left:0;}

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

 @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }


.red{color:red;
}
 
h1,h2,h3,h4,h5,b{font-family:Ryumin Bold KL, serif; clear:both;}
h1{ text-align: center; margin: 0 auto;}
#main h1{font-size:18px;text-align: left;}
#main img{display: block;margin:20px auto;}

.toplogo img, .seikiinLogo img{ margin:20% auto 10% auto;text-align: center; z-index: 200!important;}

h2 { font-size:16px; line-height: 1.2em;padding-top:30px;}
h3 { font-size:15px; line-height: 1.2em;padding-top:30px;}

section{width:100%; margin:0; padding:0; clear: both;}
section h2{ font-size:18px; line-height: 1.2em;padding-top:30px;}
section h3{ font-size:14px; line-height: 1.2em;padding-top:30px;}

/*    top    */
.sec-about{ background-color: #ffffff;  }
.sec-class{
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(250, 250, 250, 1) 5px, rgba(250, 250, 250, 1) 7px );}
.sec-guide{ background-color: #ffffff;  }
.sec-access{ background-color: #ffffff;  }
.sec-contact{ background-color: #ffffff;  }

.sec-class dl{width:300px!important;}
.sec-class dt { 
      float: left ;
      /後続の左寄せを解除/
      clear: left ;
      margin-right: 0.5em ;
      width: 50px ;
}

.sec-class dd {
      margin-left: 1em ;
      width:250px;
      /*float: left ;
      width: 300px ;*/
}
.sec-class div{
       clear: both ;
 }

.datebox{
  display: block;
  background-color: #ffffff;
  border-radius: 10px;
  width:85%;
  margin: 0 auto;
}
 .sec-guide .btn-contact{
  position: relative;
  width: 280px;
  height: 80px;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.sec-guide .btn-contact img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  display: block;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
.sec-guide .btn-contact:hover img:nth-of-type(2) {
  opacity: 0;
}




.pl0{padding-left: 0;}


.pb10{padding-bottom: 10px;}
.pt10{padding-top: 10px;}

.pb20{padding-bottom: 20px;}
.pt20{padding-top: 20px;}
.pl20{padding-left: 20px;}

.pb30{padding-bottom: 30px;}
.pt30{padding-top: 30px;}

.pb40{padding-bottom: 40px;}
.pt40{padding-top: 40px;}

.pb50{padding-bottom: 50px;}
.pt50{padding-top: 50px;}

.mb10{margin-bottom: 10px;}
.mpt10{margin-top: 10px;}

.mb20{margin-bottom: 20px;}
.mt20{margin-top: 20px;}

.mb30{margin-bottom: 30px;}
.mt30{margin-top: 30px;}

.mb40{margin-bottom: 40px;}
.mt40{margin-top: 40px;}

.mb50{margin-bottom: 50px;}
.mt50{margin-top: 50px;}

.indent{padding-left:1.5em;}


.subtitle,.subtext,.smalltext{font-size: .8em;}
.subtext{ text-align: center;padding:0; }
.stext{font-size:14px;}
.btext{font-family: Midashi Go MB31;}
.uline{background:url(https://seikiin.com/img/wave.png) bottom repeat-x;
background-size: 20px;}

#topmsg{ position: relative; padding-top:15%;width:680px;margin:0 auto;}
.current {position: fixed;top:250px; left:11%; -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;}

.highlight{ 
  font-family:Ryumin Bold KL,"リュウミン R-KL";
  background:linear-gradient(rgba(255, 255, 255, 0)40%, #fff462 80%);
  }
.notice{border-bottom: dotted 3px orange;}



.contentBox{border:1px solid #000; border-radius: 0.5em; padding:0 15px;}
.contentBox img {width:100%;}

.contentImg{float: right; padding:0 10px;}

.howto { padding:20px 0;   font-family:Gothic Medium BBB, "メイリオ", sans-serif;
 background-color:#f8f7ee; border-radius: 10px;}

.howto, .howto p { text-align: center; }
.guide p ,p{ padding:5px 0; }
.howto p { padding:5%; }
.howto img { padding:0 0 30px 0; }

.linkline{text-decoration: underline;}

.cancel{ text-decoration: line-through; }

.profbox{
  border-top: 1px solid #ccc;
  margin: 40px 0;
  padding: 40px 0;
}

/* ------ 申し込みボタン-------- */

.btn_wrapper,.btn_katsugen{  margin:50px auto 30px auto; text-align: center;
}

.btn{ display: inline-block;
  margin:5px auto;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #000;
  border: solid 1px #666;
  border-radius: 3px;
  transition: .4s;
}

.btn:hover {
  background: #17184b;
  border: solid 1px #17184b;
  color: white!important;
  text-decoration: none;
}




/* ------ リスト表示-------- */

ul {
  padding: 0em 1em 0.5em 1.5em;
  position: relative;
}

ul li {
  padding: 0.3em 0;
  list-style-type: none!important;
  line-height:1.4em;
  font-size: .95em
}

ul li a:before {
  
  font-family: "FontAwesome";
  /*content: "\f138";アイコンの種類*/
  /*content: "\f0da";アイコンの種類*/
  content: "\f105";/*アイコンの種類*/
  position: absolute;
  left : .9em;/*左端からのアイコンまでの距離*/
  color: #000;/*アイコン色*/
}

.books ul { margin:0 auto; }
.books ul li { padding: 0 20px; list-style-type: none!important;}
.books ul li a:before{ content: none; }

#main ul{padding:5%;}

.sec-media{display: inline-flex; margin:0; width:100%;}
.sec-media ul{
    margin:0 auto;
}
.sec-media ul li,.sec-media ul li a:before{
    content: none;
    padding:0;
}
.sec-media ul li{
  display: inline;padding:15px;
}
.process-nav, .katsugen-nav, .seitai-nav, .counseling-nav,.taiheki-nav{
margin: 10% auto;
}

.process-nav h3, .katsugen-nav h3, .seitai-nav h3, .counseling-nav h3, .taiheki-nav h3{
font-weight: normal; font-size:.9em;
}


blockquote, .asahinawrote, .ex, .haruchika{
  font-size: .95em;
  line-height: 1.6em;
  width:90%;
  padding:3% 5%;
  margin:10px 0;
  color:#383c3c;
  border-radius: 10px;
}
blockquote, .asahinawrote, .haruchika{background-color: #f9f7ee;}
.ex{background-color: #f9f7f0;}

.haruchika{  font-family: fot-klee-pro, sans-serif;
font-weight: 500;
font-style: normal;
}

.asahinawrote, .ex{
  font-family:Gothic Medium BBB, "メイリオ", sans-serif;}

/* ------ ページトップへ-------- */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.6;
}
#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: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* ------ 料金のインデント-------- */

.guide p, .guide ul {margin:0 20px;}

/* ------ ふわっと-------- */

body{
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}




.navadd{ width:100%; } .navadd p{ margin:0 auto; }
.katsugen-date{padding:30px 0 0 0;}

.topicpath li{ font-size: .8em; text-align: right; content: none;}
.topicpath li a:before {
  font-family: "FontAwesome";
  /*content: "\f138";アイコンの種類*/
  /*content: "\f0da";アイコンの種類*/
  content: "\f105";/*アイコンの種類*/
  position: absolute;
  right : .3em;/*左端からのアイコンまでの距離*/
  color: #000;/*アイコン色*/
}

.archive h1 {padding:0 0 20px 0;}

.archive p {padding:15px 0 15px 0;}

/* ------ 体癖-------- */

.taiheki_img{background-image: url("https://seikiin.com/img/taiheki_img.png");background-repeat: no-repeat; background-size: contain;
width:100%; height:512px;}



/* ------ コピーガード-------- */
/* 
#main {
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none
} 
*/

/* ------ 感想-------- */
.case-nav{padding-top:10%;}
.c-author{float: right; font-size: 12px; padding-bottom:30px;}
.caseImg{float: right; padding:0 10px;}
/* ------ 体癖ナビ-------- */

.taiheki-nav{padding-top:20px;}
.taiheki-nav ul li{ display: inline-block; padding:0;}
.taiheki-nav ul li a:before{ content: none!important;   list-style-type: none!important;
}


#main{ position: relative; padding-top:25%;width:680px;margin:0 auto;}

/* ------ 580以下　＝　スマホ-------- */

@media only screen and (max-width: 580px) {

body{width:100%;}
.seikiinLogo img{ margin:35% auto 30% auto;text-align: center; z-index: 200!important;}

#topmsg{ position: relative; padding-top:15%;width:90%;margin:0 auto;}
#main {position: relative; padding-top:40%;width:90%; margin:30% auto;}
.caseImg{float: none; padding:0 10px;}

section div{
  width:85%; margin:8% auto; padding:8% 0;
}

.sec-guide dd{margin-left:0;}
.sec-guide dd ul{padding:0; margin: 0;}
.sec-class dl{width:400px;}

p{padding:10px 0;}

li a {   margin-left:1em;}

#main img{display: block;margin:20px auto; width:90%;}
img.profimg{width:50%!important;}

.alignleft, img.alignleft{
float:none;
display:block;
margin: auto;}

.taiheki_img{ width:100%; height:40vh}
.contentBox img {width:100%!important;}


#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.6;
}
#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: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}




}

/* ------ 581px以上-------- */

@media only screen and (min-width: 581px) and (max-width: 767px) {
#topmsg{ position: relative; padding-top:10%;width:500px;margin:0 auto;}
#main {position: relative; padding-top:3%;width:500px; margin:30% auto;}
header div img{padding:3%;}
header{height:120px!important;}
.alignleft, img.alignleft{
float:left;}
}

/* ------ 768px以上　＝　PC-------- */

@media only screen and (min-width: 768px) {
#topmsg{ position: relative; padding-top:10%;width:680px;margin:0 auto;}
#main{ position: relative; padding-top:35%;width:680px;margin:0 auto;}
section div { position: relative; width:680px;margin:0 auto; padding: 5% 0;}


header div img{padding:5%;}
header{height:15%!important;}
.alignleft, img.alignleft{
float:left;}
}

.namecap{display:block;position: absolute;right:15px;}

.mb0{margin-bottom:0;}
.mt0{margin-top:0;}
.pb0{padding-bottom:0;}
.pb10{padding-bottom:10px;}
.pt0{padding-top:0;}
.pt10{padding-top:10px;}