* { box-sizing: border-box;
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
}

body{font-family: Arial, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic", sans-serif; 
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.1em;
    text-align: justify;
    position: relative; /* 子要素を「absolute」にする時は親要素は「relative」「fixed」にしておく必要がある、初期値「static」のままだとz-indexを指定できない */
    text-rendering: optimizeLegibility; /* text-renderingプロパティはSVGのプロパティ　「optimizeLegibility」：ブラウザーは速さや位置の正確さよりも、読みやすさを強調 */
    font-feature-settings: "palt" 1; /* そもそもウェブの和文フォントは等幅で表示されてた 「font-feature-settings」で文字詰めを設定できる　「palt」：全角の幅で設定するようにデザインされた字形のスペースを、個々の横の幅に収まるように再調整する指定 有効可否（0か1、もしくはoffかon）、1（有効）を省略した場合は、1が指定されたと見なされる*/
}

h1,h2,h3,h4,p,table,tr,th,td,dl,dt,dd,i{margin:0px; border: 0px; padding:0px; font-weight:400; color: rgb(32, 33, 36);}

ol,ul,li{list-style:none; margin:0px; padding:0px;}

img{margin:0px; border:0px; padding:0px; vertical-align: middle;}

.clear{clear:both; font-size:0px; line-height:1px; height:1px; margin:0px; border:0px; padding:0px;}

h1{font-size: 12px; font-weight: 400; color: rgb(32, 33, 36); margin: 10px auto 0px;}
/* h1{font-size: 12px; font-weight: 400; color: rgb(4, 123, 251);margin: 10px auto;} */
h2{font-size: 18px; font-weight: 600; color: rgb(32, 33, 36);}
h3{font-size: 18px; font-weight: 600;}
h4{font-size: 12px;}
p, i{font-size: 16px;}
p span{font-weight: 600; border-bottom: 1px solid;}
table, tr, th, td{font-size: 14px;}
ul{font-size: 16px;}

#menu_btn_check{
    display: none;
}

.message, .news, .announcements, .schedule, .doctor, .location, .map, .waiting_system, .job_offer{
    width: 95%; 
    text-align: left; 
    margin: 20px auto;
    padding: 15px;
    /* background-color: #fff; */
}
  
.message ul li, .news ul li, .announcements ul li{
    margin: 10px 5px 10px 5px;
}

#goaisatsu summary{font-size: 18px;}

details{font-size: 16px;}

summary{font-weight: 600;}
summary:hover {cursor: pointer; /* カーソルを指マークに */}

.message{
    margin: 5px auto;
    background-color: rgb(231, 254, 229);
    border: solid rgb(231, 254, 229) 15px;
    border-radius: 80px 75px 60px 35px / 50px 120px 250px 140px;
}

.news{
    background-color: rgb(211, 238, 254);
    border: solid rgb(211, 238, 254) 15px;
    border-radius: 180px 120px 80px 65px / 40px 90px 50px 105px;
}
.news_title{margin-left: 0.5em; padding-right: 0.8em; font-weight: 500;}
.news_article{margin-left: 0.5em; margin-bottom: 1em; padding-right: 0.8em; font-weight: 400;}

.announcements{
    background-color: rgb(227, 255, 174);
    border: solid rgb(227, 255, 174) 15px;
    border-radius: 150px 120px 20px 65px / 40px 30px 150px 105px;
}
.announcements_article{margin-left: 1em; margin-bottom: 0.8em; padding-right: 0.8em;}
.announcements_article p{margin-bottom: 0.9em;}

/*
.schedule{
    background-color: rgb(227, 255, 174);
    border: solid rgb(227, 255, 174) 15px;
    border-radius: 90px 175px 200px 105px / 50px 80px 30px 50px;
}
*/
  
.schedule img{
    width: 100%; 
    margin: auto;}
.image{
    text-align: center;
}
  
.doctor{
    background-color: rgb(175, 228, 175);
    border: solid rgb(175, 228, 175) 15px;
    border-radius: 60px 75px 240px 105px / 250px 200px 150px 85px;
}
.doctor p{
    margin: 0.9em 0 0.9em 0.5em;
}
  
.location{ 
    margin: 20px auto 5px;
    border: solid rgb(255, 233, 194) 15px;
    border-radius: 170px 150px 100px 45px / 75px 60px 105px 185px;
    padding: 15px;
    background-color: rgb(255, 233, 194);
}

.access{
    margin: 0.9em 0.5em;
    padding-right: 0.8em;
}

p.access::before{
    position: relative;
    margin-right: 0.2em;
    top: 3px;
    content: url(../image/train_pictogram.svg) ;
}

.address{ 
    text-align: left; 
    margin: 0.9em 0.5em;
    padding-right: 0.8em;
}

.map img{
    width: 100%;
    margin: auto;
    text-align: center;
}

.waiting_system{
    background-color: rgb(255, 213, 209);
    border: solid rgb(255, 213, 209) 15px;
    border-radius: 75px 60px 105px 155px / 70px 150px 100px 45px;
}
.waiting_system p{margin: 0.9em 0.5em; padding-right: 0.8em;}

.job_offer{
    margin: 20px auto 5px;
    border: solid rgb(255, 233, 194) 15px;
    border-radius: 100px 150px 120px 55px / 50px 90px 185px 165px;
    padding: 15px;
    background-color: rgb(255, 233, 194);
}

.copy{
    font-size: 10px;
    font-weight: 200;
    transform: scale(0.8);
}

/* ふわっと表示 */
/* div.message p{animation: fade 3s ease 0s infinite alternate;} /* Firefoxでは時間のプロパティは「0」ではなく「0s」にする必要があるかも */
.top_image{animation: fade 3s ease 0s;} /* Firefoxでは時間のプロパティは「0」ではなく「0s」にする必要があるかも */
table.reception_hours{animation: fade 3s ease 0s;}

/* ふわっと点滅 */
/* div.message p{animation: fade 3s ease 0s infinite alternate;} /* Firefoxでは時間のプロパティは「0」ではなく「0s」にする必要があるかも */
/* table.reception_hours {animation: fade 3s ease 0s infinite alternate;} */

@keyframes fade{0%{opacity: 0;} 100%{opacity: 1;}}

/*
scrollとanimationから頭文字を取って sa
.sa–lr        左から右にフェードイン
.sa–rl        右から左にフェードイン
.sa–up        下から上にフェードイン
.sa–down      上から下にフェードイン
.sa–scaleUp   縮小した状態から拡大しながらフェードイン
.sa–scaleDown 拡大した状態から縮小しながらフェードイン
.sa–rotateL   左に回転しながらフェードイン
.sa–rotateR   右に回転しながらフェードイン
*/
.sa      {opacity: 0; transition: all 300ms ease;}
.sa.show {opacity: 1; transform: none;}
.sa--lr        {transform: translate(-100px, 0);}
.sa--rl        {transform: translate(100px, 0);}
.sa--up        {transform: translate(0, 100px);}
.sa--down      {transform: translate(0, -100px);}
.sa--scaleUp   {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL   {transform: rotate(180deg);}
.sa--rotateR   {transform: rotate(-180deg);}

/* テストページ用 */
/* フェード、ズーム（background-image） */
.visual_carousel{
    width: 100%;
}
.visual_carousel_img{
    z-index:10;
    opacity: 0;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: visual_carousel_anime 36s 0s infinite;
    animation: visual_carousel_anime 36s 0s infinite;
}
.visual_carousel_img:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s; }
.visual_carousel_img:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s; }
.visual_carousel_img:nth-of-type(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s; }
.visual_carousel_img:nth-of-type(5) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s; }
.visual_carousel_img:nth-of-type(6) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s; }
@keyframes visual_carousel_anime {
    0% {opacity: 0; transform: scale(1.07);}
    8% {opacity: 1;}
    17% {opacity: 1;}
    25% {opacity: 0; transform: scale(1); z-index:9;}
    100% {opacity: 0}
}
@-webkit-keyframes visual_carousel_anime {
    0% {opacity: 0; -webkit-transform: scale(1.07);}
    8% {opacity: 1;}
    17% {opacity: 1;}
    25% {opacity: 0; -webkit-transform: scale(1); z-index:9;}
    100% {opacity: 0}
}
/* フェード、ズーム（webp） */
/*
.visual_carousel_webp{
    width: auto;
}
.visual_carousel_img_webp {
    opacity: 0;
    /* width: 100%; */
    /* height:100%; */
    /*
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: visual_carousel_anime 36s 0s infinite;
    animation: visual_carousel_anime 36s 0s infinite;
}
*/
/*
.visual_carousel_img_webp:nth-of-type(2) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s; }
.visual_carousel_img_webp:nth-of-type(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s; }
.visual_carousel_img_webp:nth-of-type(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s; }
.visual_carousel_img_webp:nth-of-type(5) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s; }
.visual_carousel_img_webp:nth-of-type(6) {
    -webkit-animation-delay: 30s;
    animation-delay: 30s; }
*/