/*
Theme Name: kirakuin
Author: Piece
Description: salon site
Version: 1.0
*/


/* INFORMATION================================================

【癒しの館 気楽院®️】：2026/01


 * CSS NAME      : style.css
 
 01. reset
 02. common
 03. top
 04. oshirase

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


/* 				  */
/*	  01.reset 　 */
/*				  */


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

main, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}

html{
  overflow-y: scroll;
  font-family: "M PLUS Rounded 1c", sans-serif;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
}

ol, ul{
  list-style: none;
}
 
table{
  border-collapse: collapse; 
  border-spacing: 0;
  width: 100%;
}

caption, th{
  text-align: left;
}

a:focus {
  outline:none;
}

img {
  max-width:100%;
}

/* 				  */
/*	  02.common   */
/*				  */


	body {
		font-size: 15pt;
		line-height: 1.5;
        color: #2f292b;
        background: #fff7d9;
	}

	a {
		color: #2f292b;
		text-decoration: none;
	}

/* ボタンスタイル */



/* ボックススタイル */

section{
    margin: 120px auto;
}
.container{
    width: 1150px;
}
.blbox{
    border: solid 2px #000;
    border-radius: 45px;
    background: #fff;
    width: 700px;
    margin: 0 auto;
    padding: 50px;
}
.tbox{
    font-size:15px;
    width:580px;
    margin:0 auto;
    letter-spacing:0.136em;
    line-height:2;
}
.tbox strong{
    color: #f00;
    display: block;
    font-size: 12px;
    text-align: right;
}

/* 見出しスタイル */

h1{
    font-size: 33px;
    letter-spacing: 0.12em;
    text-align: center;
}
h1 span{
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
}
h2{
    font-size: 30px;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 1.5em;
}
.gaiyo h3 span, .gaiyo h3 small{
    font-size: 15px;
    letter-spacing: 0.075em;
    padding-right: 0.5em;
}

/* リンクスタイル */

a img{
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
a img:hover{
	opacity: .7;
}
nav > ul li a:hover{
    text-decoration: underline;
}

/* 表スタイル */

#ttable table{
    font-size: 15px;
    left: 0.1em;
}
#ttable table tr th{
    padding-bottom: 0.5em;
    text-align: center;
}
#ttable table tr th:first-child{
    text-align: left;
    padding:0 0.7em;
}
#ttable table td{
    padding: 1em 0;
    text-align: center;
    width: 64px;
}
#ttable table td small{
    display: block;
    font-size: 10px;
}
#ttable table tbody tr{
    border-top:1px solid #000;
}
#ttable table + p{
    font-size: 12px;
    text-align: center;
    margin-top: 2em;
}

#mtable{
    line-height: 3;
}
#mtable table tr{
    margin-bottom: 1em;
}
#mtable table th{
    line-height: 1.2;
}
#mtable table th small{
    display: block;
    font-size: 15px;
    padding-left: 180px;
}
#mtable table td{
    text-align: right;
}
#mtable table + p{
    color: #f00;
    font-size: 15px;
}

#access table{
    font-size:15px;
    letter-spacing:0.01em;
    margin: 2em 0 4em;
}
#access dl{
    font-size: 12px;
    display:flex;
}
#access dl dt{
    width: 40px;
}

/* フォントスタイル */



/*---------------
    header
---------------*/

header{
    position: relative;
}
header .mbar{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
}
    .mbar nav > ul{
        display: flex;
        justify-content: space-around;
        font-size: 18px;
        letter-spacing: 0.2em;
        width: 660px;
        line-height:3.5;
    }
    .mbar .contact{
        border-left: 2px solid #000;
        padding: 0 15px;
    }
    .mbar .tel{
        font-size: 27px;
        letter-spacing: 0.025em;
        line-height: 1;
    }
    .mbar .tel span{
        text-align: right;
        display: block;
        font-size: 20px;
        letter-spacing: 0.025em; 
    }
    .mbar .off{
        font-size: 16px;
        letter-spacing: 0.05em;
    }


/*---------------
    footer
---------------*/

footer p{
    text-align: center;
}
footer p small{
    font-size: 12px;
}
.pagetop{
    text-align: right;
    display: block;
}


/* 				  　*/
/*	   03. top      */
/*				 　 */

#about > ul > li{
    display: flex;
    margin: 80px 0;
}
#about > ul > li p{
    font-size:16px;
    line-height:2;
    padding:50px;
}

#message{
    justify-content: space-between;
    display: flex;
    margin-top:120px;
}
#message > div{
    width: 600px;
}
#message > div dl{
    display: flex;
}
#message > div dl dt{
    font-size: 24px;
    letter-spacing: 0.1em;
}
#message > div dl dt span{
    display: block;
    font-size: 13px;
    letter-spacing: 0.4em;
}
#message > div dl dt small{
    display: block;
    font-size: 12px;
}
#message > div dl dd{
    font-size: 15px;
    padding: 7px 40px;
    border-left: 1px solid #000;
    margin-left:2.2em;
    line-height: 2;
}
#message > div dl dd ol small{
    font-size: 12px;
    letter-spacing: 0.1em;
    padding-left:0.5em;
}
#message > div > div strong{
    display: block;
    margin: 2.2em 0 1.6em;
    font-size:24px;
    letter-spacing:0.12em;
    line-height:1.75;
}
#message > div > div p{
    font-size: 16px;
    line-height: 2;
    margin-bottom: 1em;
}

#access .blbox{
    width: 1150px;
    display: flex;
}
.gaiyo{
    padding: 2em;
}

#img_parking  > ul{
    display: flex;
    justify-content: space-around;
    margin: 3em;
}

/* 				  　　　*/
/*	   04. お知らせ      */
/*				 　 　　*/

#oshirase ul li{
    width: 580px;
    margin: 0 auto 100px;
}
#oshirase ul li h2{
    text-align: left;
}
#oshirase ul li h2 time{
    text-align: right;
    font-size: 15px;
    display: block;
}


/* 				  　*/
/*	  レスポンシブ    */
/*				 　 */

@media screen and (max-width:1150px ){
	#top_header, section, #access .blbox, .container, #about{
		width: 100%;
	}
    #about > ul > li{
        display: block;
        text-align:center;
    }
}

@media screen and (max-width:979px ){
    section{
        margin: 2em auto;
    }
    .mainimg > div{
        margin: 100px auto 0;
    }
    #mainimg_top > div, .mainimg > div{
        width: 100%;
    }
    .mainimg > div{
        padding: 96px 10px;
        background-position:right bottom;
    }
    header .mbar{
        display:block;
        margin: 0;
    }
    .mbar .contact{
        text-align:right;
        border-left:none;
    }
    #top_header h1 img{
        margin-top: 100px;
    }
    #message{
        display: block;
    }
}

@media screen and (max-width:768px ){
    .mainimg{
        margin:17em 0 0;
    }
    header{
        display:block;
    }
    .mbar nav > ul{
        font-size: 15px;
        width: 440px;
    }
    .tbox, .blbox, #message > div, #oshirase ul li{
        width: 100%;
    }
    #access .blbox{
        display:block;
    }
}

@media screen and (max-width:540px ){
    article{
        padding: 1em;
    }
    .mainimg{
        margin:10em 0 0;
    }
    #ttable table td{
        padding: 1.4em 0 1em;
    }
    #ttable table tr th:first-child{
        vertical-align:top;
    }
    #ttable table tr th:first-child > span{
        display: block;
        writing-mode:vertical-lr;
        padding-left:0.7em;
    }
    #about > ul > li{
        text-align: center;
    }
    #message > div dl{
        display: block;
        margin-top:2em;
    }
    table{
        font-size: 15px;
    }
    .blbox{
        padding: 15px;
    }
    .gaiyo{
        padding: 1em;
    }
    #access dl dt{
        width: 50px;
    }
    #img_parking > ul{
        margin: 1em;
    }
}

@media screen and (max-width:414px ){
    section, .mainimg{
        margin: 0;
    }
    #mainimg_top > div{
        margin:130px auto 0;
        height:auto;
    }
    section{
        margin-top: 0;
    }
}

@media screen and (max-width:375px ){
    .mainimg > div > div{
        width: 100%;
    }
}