/* ===================================================================
CSS information
 file name  :  common.css
 style info :  基本構造（common.css）
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');



html {font-size: 62.5%}
html * {}
.sp_only{display:none;}

:root {
  --thk_G:#5FAFAC;
  --thk_G_20per:#DFEFEE;
  --thk_P:#AF5F81;
  --thk_P_20per:#EEDEE5;
}

body {
  background-color:#FFFFFF;
  font-family: 'M PLUS Rounded 1c', "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size:1.6rem;
  color:#333;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;/*MacのSafari,Chromeでfontがデザインより太く見えるためフォントのアンチエイリアスを調整*/
  font-weight: 400;
}

p{line-height: 2;}


@media only screen and (max-width: 768px) {
  img{ max-width:100%;}
  .sp_only{display:block;}
  .pc_only,
  .slick-next,
  .slick-prev,
  .next-arrow,
  .prev-arrow{display:none !important;}
}



img{/*image-rendering: -webkit-optimize-contrast;縮小画像がchromeだとぼやけるのを回避*/
  flex-shrink: 0;/*flex使った場合IEだと画像が伸縮されるのを回避*/
}

/*文字の上下余白を削除*/
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
p::before,
p::after,
li::after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc(-1em / 2);
}

#main_inner {
  height: 80vh;
  min-height: 550px;
}

#wrapper {
  width:100%;
  margin:0 auto;
  overflow: hidden;
  padding-left: 200px;/*左ナビ分の余白*/
}
@media only screen and (max-width: 970px) {
  #wrapper {
    padding-left: 0;/*ナビをハンバーガーメニューに格納、左ナビ分の余白削除*/
  }
}



#header {
  background-color:#439F7F;
  width:100%;
  margin-bottom:20px;
  float:left;
}
#main {
  width:100%;
  margin-bottom:20px;
}
.inner {
  max-width: 1000px;
  margin: auto;
}



/*========================================
 フッター
========================================*/
footer{
  margin:0 auto;
  background:var(--thk_G);
  padding:50px 0;
  display:flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
footer h2{
  background:url(../common_images/footer_h2.png) no-repeat;
  background-size:contain;
  text-indent: -9999px;
  width:200px;
  height: 55px;
  margin-bottom: 50px;
}
footer #footer_nav{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 50px;
  grid-row-gap: 25px;
}
footer #footer_nav a{color: #fff;}

footer small{
  display:block;
  padding-top:50px;
  font-size:1.2rem;
}
footer a{transition:.5s; text-decoration: none!important; }
footer a:hover{opacity: .5;}



@media only screen and (min-width: 769px) {
  footer{
    padding:100px 0;
  }
  footer h2{
    width:400px;
    height: 111px;
    margin-bottom: 100px;
  }
  footer #footer_nav{
    display:flex;
    justify-content: space-evenly;
    width: 800px;
    grid-gap: inherit;
  }
  footer small{
    display:block;
    padding-top:100px;
    font-size:2rem;
  }
}



/*========================================
 地図
========================================*/
#map .inner{max-width:none;}
#map iframe{vertical-align: bottom;}/*iframe下に余白出るのを回避*/


/*========================================

 その他汎用パーツ

========================================*/

/*1行空白*/
.margin-top_1em{ margin-top:1em;}
.margin-top_2em{ margin-top:2em;}

/*画面幅フィット*/
.full_width {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: none;
}

/*リスト*/
ol{
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}
ol ol{
  padding-left: 1em;
}
ol li{
  text-indent: -1.3em;
  padding-left: 1.3em;
  padding-top: 0.5em;
}
ol li:before {
  counter-increment: item;
  content: "・";
  padding-right: .3em;
  font-weight: bold;
}

/* ボタン */
a:link,
a:visited{
  transition:.5s;
  color:var(--thk_P);
  text-decoration: none;
}
a:hover{
  opacity: .7;
  text-decoration: underline!important;
}

.btn_wrap{
  position: relative;
  z-index: 0;
}
.btn_wrap span{font-size: 70%;}

/*基本的なボタン*/
.input_wrap:before,
a.btn_basic:before{
  font-family: 'Material Icons';
  content: "\e315";
  position: absolute;
  /*top: 50%;*/
  left: 1em;
  color: #fff;
  opacity: .5;
  transition:.5s;
}

.input_wrap{display: inline-block;}
.input_wrap:before{top: 21%;}


input[type="submit"], 
input[type="reset"],
input[type="button"],
a.btn_basic{
  display:inline-block;
  line-height: 1.2;
  text-decoration: none;
  border:none;
  padding:1em 2.5em;
  color: #fff;
  background:var(--thk_G);
  transition:.5s;
}
input[type="submit"]:hover, 
input[type="reset"]:hover,
input[type="button"]:hover,
a.btn_basic:hover{
  background: #333;
  color: #eee;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .5);
  text-decoration: none !important;
}
.input_wrap:hover:before,
a.btn_basic:hover:before{
  left: 1.5em;
  opacity: .8;
}
/*採用のカラーはこちら*/
#ca_name-recruit input[type="submit"], 
#ca_name-recruit input[type="reset"],
#ca_name-recruit input[type="button"],
#ca_name-recruit a.btn_basic{
  background:var(--thk_P);
}

/*注釈 -キャプション-*/
.cap{
  font-size: 1.4rem;
  line-height:1.4;
}

/*反転抜きボタン*/
.reverse { border: #fff 1px solid!important;}

/*東北会病院キーカラー緑*/
.color_thk_G{
  color:var(--thk_G);
}


/*========================================

 info/新着情報・お知らせ・プログラムのマーク

========================================*/
#info span.mark,
#ca_name-info span.mark{
  display:inline-block;
  width: auto;
  font-size: 1.2rem;
  text-align: center;
  margin: auto 1em;
  padding:.1em 1em;
  color: #fff;
  border-radius:6px;
  text-indent: 0;
  background: #B49143;
}

#info span.news,
#ca_name-info span.news {
  background: #4380B4 !important;
}
/*
#ca_name-info .tag-0, .tag-1, .tag-2, .tag-3, .tag-4, .tag-5, .tag-6, .tag-101 {
  font-size: 1.1rem;
  background: #666;
  display: inline-block;
  padding: 0.1em 1em;
  border-radius: 6px;
  color: #fff;
  margin: 0 10px;
  width: 60px;
  text-align: center;
}
#ca_name-info .tag-0 {
  background: var(--thk_G);
}
*/

/*
#info span.mark-info{background: #4380B4;}
#info span.mark-event{background: #B49143;}
*/