@charset "UTF-8";

/*
Theme Name: 森猫堂
*/


/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #333;
	FONT-SIZE:20px;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

img{
	border:0;
}
@media only screen and (max-width: 479px) {
img{
	border:0;
	max-width: 100%;
}
}

a:link,a:visited{
	outline:0;
	color:#333;
}

a:hover{
	outline:0;
	color: #999;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,br.spm,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,.nst,.nss{
	display:none;
}
@media only screen and (max-width: 1080px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 3% 20px 3%;
background: #eee;
position: fixed;
top:0;
left:0;
font-family: 'Cormorant Garamond', serif;
z-index: 999;
}
@media only screen and (max-width: 1600px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 3% 20px 3%;
background: #eee;
position: fixed;
top:0;
left:0;
font-family: 'Cormorant Garamond', serif;
z-index: 999;
}
}
@media only screen and (max-width: 1440px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 3% 20px 3%;
background: #eee;
position: fixed;
top:0;
left:0;
font-family: 'Cormorant Garamond', serif;
z-index: 999;
}
}
@media only screen and (max-width: 1280px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 3% 20px 1%;
background: #eee;
position: fixed;
top:0;
left:0;
}
}
@media only screen and (max-width: 1080px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 5px 3% 0 3%;
background: #eee;
position: fixed;
top:0;
left:0;
}
}

#header-language{
clear: both;
float: left;
width: 12%;
height: auto;
margin: 0;
padding: 0;
font-family: 'Zen Kaku Gothic New', sans-serif;
}
@media only screen and (max-width: 1280px) {
#header-language{
clear: both;
float: left;
width: 8%;
height: auto;
margin: 0;
padding: 0;
}
}
#header-language p{
text-align: left;
font-size: 13px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 834px) {
#header-language{
clear: both;
float: left;
width: 15%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 479px) {
#header-language{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

#header-title{
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1440px) {
#header-title{
float: left;
width: 30%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#header-title{
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#header-title{
float: left;
width: 85%;
height: auto;
margin: 0;
padding: 5px 0 0;
}
}
@media only screen and (max-width: 834px) {
#header-title{
float: left;
width: 85%;
height: auto;
margin: 0;
padding: 5px 0 0;
}
}
@media only screen and (max-width: 479px) {
#header-title{
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 5px 0 0;
}
}
header h1{
clear: both;
float: left;
width: 100%;
height: auto;
font-size: 18px;
font-weight: normal;
line-height: 150%;
text-align: left;
margin: 0;
padding: 0;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
header h1.en{
font-family: 'Cormorant Garamond', serif;
font-size:20px;
font-weight: 400;
}
header h1 strong{
font-size: 25px;
font-weight: 600;
font-family: 'Cormorant Garamond', serif;
}
header h1 span{
margin: 0 0 0 10em;
}
header h1 span.s2{
margin: 0 0 0 6.1em;
}
@media only screen and (max-width: 1080px) {
header h1{
clear: both;
float: left;
width: 100%;
height: auto;
font-size: 17px;
font-weight: normal;
line-height: 150%;
text-align: left;
margin: 0;
padding: 0;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
header h1 strong{
font-size: 22px;
font-weight: 700;
font-family: 'Cormorant Garamond', serif;
}
header h1 span{
margin: 0 0 0 10em;
}
header h1 span.s2{
margin: 0 0 0 6.1em;
}
}
@media only screen and (max-width: 835px) {
header h1{
clear: both;
float: left;
width: 100%;
height: auto;
font-size: 20px;
font-weight: normal;
line-height: 150%;
text-align: left;
margin: 0;
padding: 0;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
header h1 span{
margin: 0 0 0 10em;
}
header h1 span.s2{
margin: 0 0 0 6.1em;
}
}
@media only screen and (max-width: 480px) {
header h1{
clear: both;
float: left;
width: 100%;
height: auto;
font-size: 16px;
font-weight: normal;
line-height: 150%;
text-align: left;
margin: 0;
padding: 0;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
header h1 span{
margin: 0 0 0 10em;
}
header h1 span.s2{
margin: 0 0 0 6.1em;
}
}

#header-menu{
float: right;
width: 48%;
height: auto;
margin: 0;
padding: 0;
font-family: 'Cormorant Garamond', serif;
font-weight:600;
}
@media only screen and (max-width: 1440px) {
#header-menu{
float: right;
width: 57%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#header-menu{
float: right;
width: 55%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#header-menu{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 10px 0 0 0%;
padding: 10px 0 0;
border-top:1px solid #fff;
}
}
@media only screen and (max-width: 480px) {
#header-menu{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 10px 0 0 0;
padding: 10px 0 0;
border-top:1px solid #fff;
}
}

#header-menu .fs{
font-family: 'Cormorant Garamond', serif;
font-size: 1.1em;
margin: 0 -2px 0 0;
}

/*メニュー
--------------------------------------------------------------------------*/
#header-menu menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: right;
}
@media only screen and (max-width: 1080px) {
#header-menu menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: right;
}
}
#header-menu menu ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
font-family: 'Cormorant Garamond', serif;
}

#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 17px;
margin: 0 0 0 5%;
padding: 0;
float: right;
}
@media only screen and (max-width: 1280px) {
#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 17px;
margin: 0 0 0 4%;
padding: 0;
float: right;
}
}
@media only screen and (max-width: 1080px) {
#header-menu menu ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
}
#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 17px;
margin: 0 0 0 2%;
padding: 0;
float: right;
}
}
@media only screen and (max-width: 480px) {
#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 15px;
margin: 0 0 0 1.5%;
padding: 0;
}
}
@media only screen and (max-width: 414px) {
#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 14px;
margin: 0 0 0 1%;
padding: 0;
}
}
@media only screen and (max-width: 375px) {
#header-menu menu li{
list-style-type: none;
display: inline;
font-size: 13px;
margin: 0 0 0 1%;
padding: 0;
}
}

#header-menu menu li a{
text-decoration: none;
}

/*---------------------
  ボタン
  --------------------*/
button,button2 {
  width: auto;
  height: atuo;
  padding: 0;
  margin: 0;
  color: #fff;
  background: none;
  border: none;
  font-size: 13px;
  font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
button:focus,button2:focus {
  outline: none;
}

/*左メニュー
--------------------------------------------------------------------------*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    /* display: none; */
	top:0;
    left: -20%;
	width:20%;
    height: 100vh;/*ナビの高さ*/
	background:#ccc;
    /*動き*/
	transition: all 0.3s;
}
@media only screen and (max-width: 1080px) {
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -25%;
	width:25%;
    height: 100vh;/*ナビの高さ*/
	background:#ccc;
    /*動き*/
	transition: all 0.3s;
}
}
@media only screen and (max-width: 834px) {
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -30%;
	width:30%;
    height: 100vh;/*ナビの高さ*/
	background:#ccc;
    /*動き*/
	transition: all 0.3s;
}
}
@media only screen and (max-width: 640px) {
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -35%;
	width:35%;
    height: 100vh;/*ナビの高さ*/
	background:#ccc;
    /*動き*/
	transition: all 0.3s;
}
}
@media only screen and (max-width: 479px) {
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -50%;
	/*widthを変えたら↓[#g-nav.panelactive #g-nav-list]のwidthも同じ数値に*/
	width:50%;
    height: 100vh;/*ナビの高さ*/
	background:#ccc;
    /*動き*/
	transition: all 0.3s;
}
}

#g-nav {
font-size: 17px;
text-align: left;
margin:0 5% 0 0;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}

#g-nav a{
color: #fff;
text-decoration: none;
font-size:20px;
}
#g-nav p a:hover{
color: #333;
}
#g-nav a .fs{
margin: 0 -3px 0 0;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    left: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:20%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 1080px) {
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:25%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
}
@media only screen and (max-width: 834px) {
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:30%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
}
@media only screen and (max-width: 640px) {
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:35%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
}
@media only screen and (max-width: 479px) {
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:50%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin: 39px 0 0;
	padding: 0 0 0 5%;
font-family: 'Cormorant Garamond', serif;
}

/* リストのレイアウト設定 */

#g-nav a{
	color: #fff;
	text-decoration: none;
	padding:0 10px;
	display: block;
	letter-spacing: 0.1em;
    height: 31px;
    line-height: 36px;
}
#g-nav a:hover{
color: #333;
}

/*========= オープンボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 100;
		/*ボタンを最前面に*/
        top: 3px;
        left: 22px;
	cursor: pointer;
    width: 50px;
    /* height:50px; */
/* background: #fff; */
position: relative;
font-size: 13px;
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #111;
}
.openbtn::after{
	position: absolute;
	content: "";
    top: 14px;
    right: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid #ccc;
    border-right: 0;
}


/*========= クローズボタンのためのCSS ===============*/

.closebtn{
	position: relative;
	top:7px;
	left: 36px;
	cursor: pointer;
    font-size: 15px;
    color: #fff;
    width: 50px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: normal;
}
.closebtn::before{
    content: "";
    position: absolute;
	top: 16px;
    left: -11px;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 5px solid #fff;
    border-left: 0;
}

.closebtn:hover::before {
    transform: translateX(-5px); /* hover時にX方向に5px移動 */
}

.closebtn:hover{
    color: #333;
}


  /*========= ホームボタンのためのCSS ===============*/
.homebtn{
position: absolute;
right: 15px;
top: 2px;
}
.homebtn a{
    font-size: 12px;
    color: #fff;
    text-decoration: none;
font-family: 'Roboto', sans-serif;
}
#g-nav .homebtn a{
font-size: 12px;
font-weight: normal;
}

.homebtn::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-bottom: 5px solid #fff;
    border-top: 0;
}

.homebtn a:hover{
    color: #333;
}

.homebtn:hover::after {
    transform: translateY(-3px); /* hover時にY方向に-5px移動 */
}

/*左ドロップダウン
--------------------------------------------------------------------------*/
.sub-menu{
display:none;
margin-bottom: 12px;
}

.sub-menu-title{
    display:flex;
    color: #fff;
    height: 36px;
    margin-bottom: 6px;
}


.sub-menu-title a{
    width:calc(100% - 45px);
    line-height: 36px;  height: 36px;
font-size: 17px;
}

.sub-menu-wrapper .sub-menu-title a{
    border-right:1px solid rgba(255,255,255,.2) ;
}

.sub-menu-title-triangle-wrapper{
    padding: 15px 20px 20px;
    width: 45px;
}
.sub-menu-title-down-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-top: 5px solid #ffffff;
    border-bottom: 0;
}
.sub-menu-title-up-triangle {
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-bottom: 5px solid #ffffff;
    border-top: 0;
}

.sub-menu-title-triangle-wrapper.not-active:hover .sub-menu-title-down-triangle {
    transform: translateY(5px);
}
.sub-menu-title-triangle-wrapper:hover{
    cursor: pointer;
}

.sub-menu-title-triangle-wrapper.not-active:hover .sub-menu-title-up-triangle {
    transform: translateY(-5px);
}

#left-language{
    font-size: 13px;
    display: flex;
    height: 12px;
    line-height: 12px;
    color: #fff;
    margin: 35px 20px 0 0; 
	padding: 20px 0 0 10px;
	border-top:1px solid #ddd;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: normal;
}

#g-nav #left-language a{
    font-size: 13px;
    height: 13px;
    line-height: 13px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-decoration: underline;
	margin: 0;
	padding: 0;
}

/*sub-menuの中
--------------------------------------------------------------------------*/
.sub-menu {
    padding-left: 8px;
    }
.sub-menu-link{
font-size: 14px;
line-height: 24px;
}

/*メイン
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 200px;
background: url(../../../image/footer.png) no-repeat right bottom;
}
main.conta{
background: url(../../../image/footer.png) no-repeat right bottom;
}
@media only screen and (max-width: 1920px) {
main.conta{
background: url(../../../image/footer.png) no-repeat right bottom;
}
}
@media only screen and (max-width: 1280px) {
main.conta{
padding: 0 0 100px;
background: url(../../../image/footer.png) no-repeat right bottom/60%;
}
}
@media only screen and (max-width: 835px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: url(../../../image/footer.png) no-repeat right bottom/80%;
}
main.conta{
padding: 0 0 200px;
background: url(../../../image/footer.png) no-repeat right bottom/80%;
}
}
@media only screen and (max-width: 640px) {
main.conta{
padding: 0 0 200px;
background: url(../../../image/footer.png) no-repeat right bottom/80%;
}
}
@media only screen and (max-width: 480px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 50px;
background: url(../../../image/footer.png) no-repeat right bottom/80%;
}
main.conta{
padding: 0 0 150px;
background: url(../../../image/footer.png) no-repeat right bottom/80%;
}
}

main p{
	margin:0 0 30px;
	padding:0;
	text-align:justify;
	text-justify:inter-ideograph;
}
strong{
font-size: 1.1em;
}

#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 100vh;
margin: 0;
padding: 0;
background: url(../../../image/top.webp) no-repeat top center/100%;
background-attachment: fixed;
}
@media only screen and (max-width: 479px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 100vh;
margin: 0 0 0;
padding: 0;
background: url(../../../image/top.webp) no-repeat bottom center/100%;
background-attachment: fixed;
}
}

#photo2{
display: none;
clear: both;
float: left;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
#photo2 img{
width: 100%;
}

#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 3% 0;
background: #fff;
}
@media only screen and (max-width: 1600px) {
#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 3% 0;
background: #fff;
}
}
@media only screen and (max-width: 1440px) {
#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 4% 0 4%;
background: #fff;
}
}
@media only screen and (max-width: 835px) {
#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 0 0;
background: #fff;
}
}
@media only screen and (max-width: 640px) {
#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 0;
background: #fff;
}
}
@media only screen and (max-width: 480px) {
#top{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 0;
}
}

#top-waku{
clear: both;
float: right;
width: 100%;
height:auto;
margin: 0 auto;
padding: 0;
text-align: center;
display: flex;
justify-content: center;
}
@media only screen and (max-width: 1440px) {
#top-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
}
@media only screen and (max-width: 1280px) {
#top-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#top-waku{
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 5%;
}
}
@media only screen and (max-width: 835px) {
#top-waku{
clear: both;
float: right;
width: 100%;
height:auto;
margin: 0 auto;
padding: 0;
text-align: center;
display: inherit;
justify-content: center;
}
}

.top-box{
float: left;
width: 23%;
height: auto;
margin: 0 1% 0 1%;
padding: 0;
text-align:center;
}
.top-box img{
width: 100%;
height: 100%;
}
@media only screen and (max-width: 835px) {
.top-box{
float: left;
width: 48%;
height: auto;
margin: 0 1% 40px 1%;
padding: 0;
text-align: left;
}
}

#top h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-size: 25px;
line-height: 140%;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}
@media only screen and (max-width: 480px) {
#top h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 20px;
line-height: 140%;
}
}

.top-box-text{
clear: both;
width: 100%;
height: 90%;
margin: 0;
padding:0;
border: 1px solid #000;
position: relative;
}
@media only screen and (max-width: 835px) {
.top-box-text{
clear: both;
float: left;
width: 100%;
height: 90%;
min-height: 500px;
margin: 0;
padding:0;
border: 1px solid #000;
position: relative;
}
.top-box .top-box-text img{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
}
@media only screen and (max-width: 640px) {
.top-box-text{
clear: both;
float: left;
width: 100%;
height: 90%;
min-height: 400px;
margin: 0;
padding:0;
border: 1px solid #000;
position: relative;
}
.top-box .top-box-text img{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
}
@media only screen and (max-width: 480px) {
.top-box-text{
clear: both;
float: left;
width: 100%;
height: 90%;
min-height: 300px;
margin: 0;
padding:0;
border: 1px solid #000;
position: relative;
}
.top-box .top-box-text img{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
}
@media only screen and (max-width: 414px) {
.top-box-text{
clear: both;
float: left;
width: 100%;
height: 90%;
min-height: 270px;
margin: 0;
padding:0;
border: 1px solid #000;
position: relative;
}
.top-box .top-box-text img{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
}

.top-box-c{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
@media only screen and (max-width: 835px) {
.top-box-c{
width: 100%;
position: absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
}

.top-box-c a:link,.top-box-c a:visited{
text-decoration: none;
}
.top-box-text p{
font-size: 20px;
line-height: 180%;
text-align: center;
margin: 0;
padding: 10px 3%;
}
.top-box-text p.wen{
font-size: 26px;
line-height: 140%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
letter-spacing: -0.2em;
}
@media only screen and (max-width: 1600px) {
.top-box-text p.wen{
font-size: 22px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 1440px) {
.top-box-text p{
font-size: 17px;
line-height: 160%;
text-align: center;
margin: 0;
padding: 10px 3%;
}
.top-box-text p.wen{
font-size: 20px;
line-height: 140%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 16px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 1280px) {
.top-box-text p{
font-size: 15px;
line-height: 160%;
text-align: center;
margin: 0;
padding: 10px 3%;
}
.top-box-text p.wen{
font-size: 18px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 1080px) {
.top-box-text p{
font-size: 14px;
line-height: 160%;
text-align: center;
margin: 0;
padding: 5px 3%;
}
.top-box-text p.wen{
font-size: 14px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 12px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 835px) {
.top-box-text p{
font-size: 15px;
line-height: 150%;
text-align: center;
margin: 0;
padding: 5px 3%;
}
.top-box-text p.wen{
font-size: 18px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 480px) {
.top-box-text p.wen{
font-size: 15px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 13px;
letter-spacing: -0.2em;
}
}
@media only screen and (max-width: 414px) {
.top-box-text p{
font-size: 13px;
line-height: 150%;
text-align: center;
margin: 0;
padding: 5px 3%;
}
.top-box-text p.wen{
font-size: 15px;
line-height: 130%;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.top-box-text p.wen .doru{
font-family: 'Cormorant Garamond', serif;
font-size: 13px;
letter-spacing: -0.2em;
}
}

.sen{
clear: both;
float: left;
width: 90%;
height:15px;
margin: 0 5% 20px;
padding: 0;
border-top:1px solid #000;
}
@media only screen and (max-width: 1440px) {
.sen{
clear: both;
float: left;
width: 90%;
height:15px;
margin: 0 5% 10px;
padding: 0;
border-top:1px solid #000;
}
}
@media only screen and (max-width: 1080px) {
.sen{
clear: both;
float: left;
width: 90%;
height:15px;
margin: 0 5% 0;
padding: 0;
border-top:1px solid #000;
}
}
@media only screen and (max-width: 835px) {
.sen{
clear: both;
float: left;
width: 90%;
height:5px;
margin: 0 5% 5px;
padding: 0;
border-top:1px solid #000;
}
}

/*サブページ
--------------------------------------------------------------------------*/
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0px 0 0;
padding: 0 18% 30px;
text-align: center;
}
@media only screen and (max-width: 835px) {
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -30px 0 0;
padding: 30px 3% 30px 3.5%;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -30px 0 0;
padding: 30px 4.5% 30px 4.5%;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -30px 0 0;
padding: 30px 6% 30px 6%;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
#sub-page{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -30px 0 0;
padding: 30px 7% 30px 7%;
text-align: center;
}
}

#sub-page h1{
clear: both;
float: left;
width: 100%;
height: 60px;
margin: 0 0 100px;
padding: 10px 0 0;
text-align: left;
font-size: 17px;
line-height: 100%;
font-weight: normal;
 z-index: 990;
 position: fixed;
 background: #fff;
}
#topl{
 z-index: 980;
 position: fixed;
  background: #fff;
}

/*　上に上がる動き　*/
#topp.UpMove,#topl.UpMove{
	animation: UpAnime 1.5s 0.2s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}
/*　下に下がる動き　*/
#topp.DownMove,#topl.DownMove{
	animation: DownAnime 1.0s 0s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-500px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

@media only screen and (max-width: 1600px) {
#sub-page h1{
clear: both;
float: none;
width: 100%;
height: 60px;
margin: 0 0 100px;
padding: 10px 0 0;
text-align: left;
font-size: 17px;
line-height: 100%;
font-weight: normal;
}
}
@media only screen and (max-width: 835px) {
#sub-page h1{
clear: both;
float: none;
width: 100%;
height: 60px;
margin: 0 0 100px;
padding: 40px 0 30px;
text-align: left;
font-size: 17px;
line-height: 100%;
font-weight: bold;
 z-index: 950;
}
}
@media only screen and (max-width: 640px) {
#sub-page h1{
clear: both;
float: none;
width: 100%;
height: 60px;
margin: 0 0 100px;
padding: 40px 0 30px;
text-align: left;
font-size: 17px;
line-height: 100%;
font-weight: bold;
 z-index: 950;
}
}
@media only screen and (max-width: 480px) {
#sub-page h1{
clear: both;
float: none;
width: 100%;
height: 60px;
margin: 0 0 100px;
padding: 40px 0 30px;
text-align: left;
font-size: 17px;
line-height: 100%;
font-weight: bold;
 z-index: 950;
}
}

#web-works{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
}

main #web-works p{
	text-align:justify;
	text-justify:inter-ideograph;
margin: 0 0 30px;
padding: 0;
line-height: 200%;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
color: #252525;
letter-spacing: 0.05em;
}
main #web-works p strong{
font-size: 15px;
}
main #web-works p strong.fnamae{
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
}
#web-works h2{
font-family: 'Shippori Mincho', serif,"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}

main #web-works p.ps{
text-indent : -2em;
    padding-left : 2em;
}
main #web-works p.ps2{
text-indent : -2.2em;
    padding-left : 2.2em;
}
main #web-works p .doru{
	font-family:'Inter', 'Zen Kaku Gothic New', sans-serif;
}

@media only screen and (max-width: 480px) {
main #web-works p{
	text-align:justify;
	text-justify:inter-ideograph;
margin: 0 0 30px;
padding: 0;
line-height: 200%;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
color: #252525;
letter-spacing: 0.05em;
}
main #web-works p.p1{
text-align: center;
}
}

#prof-photo{
clear: both;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
#prof-photo img{
border: 1px solid #000;
margin: 0 2% 0 0;
max-width: 23%;
cursor: zoom-in;
}

#work-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#web-works #work-title p{
margin: 0 0 20px;
font-size: 18px;
line-height: 150%;
font-family: 'Noto Serif JP',"メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
main #web-works #work-title p.wen{
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: 21px;
line-height: 140%;
}
#web-works #work-title p strong{
font-size: 15px;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: bold;
}
#web-works #work-title p.wen strong{
font-family: 'Inter', 'Noto Sans JP', sans-serif;
font-weight: bold;
font-size: 16px;
}
@media only screen and (max-width: 835px) {
#web-works #work-title p{
margin: 0 0 20px;
font-size: 18px;
line-height: 150%;
}
#web-works #work-title p strong{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#web-works #work-title p{
margin: 0 0 20px;
font-size: 17px;
line-height: 150%;
}
#web-works #work-title p strong{
font-size: 15px;
}
}
@media only screen and (max-width: 480px) {
#web-works #work-title p{
margin: 0 0 20px;
font-size: 16px;
line-height: 150%;
}
#web-works #work-title p strong{
font-size: 13px;
}
}

#work-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
#work-pict img{
max-width: 100%;
}

#contact{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 700px;
margin: 0;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 1600px) {
#contact{
clear: both;
float: left;
width: 100%;
height:auto;
min-height: 600px;
margin: 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 1440px) {
#contact{
clear: both;
float: left;
width: 100%;
height:auto;
min-height: 500px;
margin: 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 1280px) {
#contact{
clear: both;
float: left;
width: 100%;
height:auto;
min-height: 400px;
margin: 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#contact{
clear: both;
float: left;
width: 100%;
height:auto;
min-height: 300px;
margin: 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 480px) {
#contact{
clear: both;
float: left;
width: 100%;
height:auto;
min-height: 650px;
margin: 0;
padding: 0;
text-align: left;
}
}

#contact dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 70% 0 0;
}
@media only screen and (max-width: 1280px) {
#contact dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 60% 0 0;
}
}
@media only screen and (max-width: 1080px) {
#contact dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 50% 0 0;
}
}
@media only screen and (max-width: 480px) {
#contact dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 20% 0 0;
}
}
@media only screen and (max-width: 414px) {
#contact dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 10% 0 0;
}
}
#contact dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-weight: bold;
font-size: 15px;
line-height: 100%;
font-family: 'Inter','Noto Sans JP', sans-serif;
}
#contact dt span{
font-weight: 300;
}
#contact dd{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 15px;
line-height:100%;
}

#contact input,#contact textarea{
border: none;
}
#sub-page input[type="text"],#sub-page input[type="email"],#sub-page input[type="tel"],#sub-page textarea{
	width:100%;
	font-size: 16px;
	border-bottom: 1px solid #ccc;
	font-family: 'Noto Sans JP', sans-serif;
}
input[type="submit"]{
display: block;
width: 11%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
#contact input:focus {
outline: none;
border-bottom: 1px solid #000;
}
#contact textarea{
height: 1.5em;
line-height: 100%;
}
#contact dd textarea:focus{
outline: none;
border-bottom: 1px solid #000;
}
@media only screen and (max-width: 1600px) {
input[type="submit"]{
display: block;
width: 15%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}
@media only screen and (max-width: 1280px) {
input[type="submit"]{
display: block;
width: 18%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}
@media only screen and (max-width: 1080px) {
input[type="submit"]{
display: block;
width: 20%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}
@media only screen and (max-width: 640px) {
input[type="submit"]{
display: block;
width: 25%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}

@media only screen and (max-width: 480px) {
#sub-page input[type="text"],#sub-page input[type="email"],#sub-page input[type="tel"],#sub-page textarea{
	width:100%;
	font-size: 13px;
	border-bottom: 1px solid #ccc;
	font-family: 'Noto Sans JP', sans-serif;
}
input[type="submit"]{
display: block;
width: 32%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}
@media only screen and (max-width: 414px) {
input[type="submit"]{
display: block;
width: 38%;
	 background-color: #ccc;
	 color: #fff;
	 padding:6px 0;
	font-size:15px;
}
}

/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
left:6px!important;width:70px!important;
}
.grecaptcha-badge:hover{left:6px!important;width:256px!important;}

a.googlelink{
cursor: pointer;
}
.grecaptcha-badge { visibility: hidden; }

#mail-thanks{
clear: both;
float: left;
width: 100%;
height: 150px;
margin: 0;
padding: 0;
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#000;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
}
 
#page-top p:hover{
	background:#8b8b8b;
	color:#fff;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}


h1.entry-title,header.entry-header{
display: none;
}