@charset "utf-8";

body{background:  #F4F4F4;
	color:#000;
	background-position: ;
	  background-size: 45rpx;
  min-height: 100vh;
  min-height: -webkit-fill-available;
} 
html{  height: -webkit-fill-available;}
#top{margin-top: -20px;}
a{color: crimson;}
#can{background: #F4F4F4;  box-shadow: 0 0px 50px rgba(0,0,0,0.05);}
.presen {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

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;
}

wrapper{  margin: 0 auto; text-align: center;
}

contents{ }
body{
	    background: url(https://hyonaguonly.com/img/pattern3.gif);
}

@media screen and (max-width:480px) {
	/* ここにスマホ版だけの記述 */
	
.big{ font-size: 23px; line-height: 2.5em; font-weight: 500; letter-spacing: .05em; color: #333;}
span.moji {line-height: 1.8em}
p.big{
font-family: 'Noto Sans JP', sans-serif;
    line-height: 76px;
    color: #fff;
    font-weight: 900;
    font-size: 52px; }
.marker {
  background: linear-gradient(transparent 15%, rgba(220, 20, 60, 0.7) 0%);
	    padding: 0 2px;
}
p.A{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 18px; color: #fff;
	letter-spacing: .02em;
}
p.B{
    font-family: 'Helvetica','Noto Sans JP', sans-serif;
	font-weight: 400;
    font-size: 11px;
    color: #fff;
    letter-spacing: .12em;
    margin-bottom: -5px;
}
p.C{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1px;
	color: #fff;
	padding-bottom: 12px;
}
p.D{ font-size: 25px;}
p.eng{
	font-size: 12px; letter-spacing: 1.7px; margin-right: 30px; font-family: Helvetica Neue, Helvetica, Arial;
}
p.small{
	font-size: 12px; letter-spacing: 1px; margin: 15px 0; line-height: 2em;}
p.black{color: #151515;
font-family: 'Zen Kaku Gothic New', sans-serif;font-size: 13px;line-height: 2em;
}
p.red{font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: .1em; line-height: 20px;
font-size: 13px; color: #ECECEC;}
p.eng{
    font-size: 11px;
    letter-spacing: .26em;
    margin-right: 30px;
    font-family: Helvetica Neue, Helvetica, Arial;
    font-weight: 200;
}
	
.gaiyo{	font-family: 'Noto Sans JP', sans-serif; font-weight: 500;
font-size:14px; line-height: 2.2em; padding: 0 1px 0 2px;}

	
.g_nav {
	font-family: 'Noto Serif JP', serif;
	background: #1F1F1F;
	padding: 4px 0;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	color: antiquewhite;
}
.g_nav a{
text-decoration: none;
color:antiquewhite;
}
.g_nav li{
	
	    display: inline;
    margin: 10px 8px;
    font-size: 13px;
	}
	.g_nav ul {		transform: scaleX(0.95);}
	
	.boxC{
		  z-index: 1;
	background: linear-gradient(-0deg, #F4F4F4 0%, #efe3d3 30%, #F4F4F4 50%, #f7e4dd 70%, #F4F4F4 100% );
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	text-align: left;
	color: #1F1F1F;
	line-height: 2em;
	font-size: 14px;
	margin: 40px 0;
}
.kakoi{border: 1px #999 solid; padding: 12px 15px 12px 17px;  border-radius: 5px;
  background-color: rgba(255,255,255,0.60);
	line-height: 1.8em;
 font-size: 12px; margin: 20px 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-weight: 200;}


.bbs{
  color: crimson;
	font-family: 'Noto Serif JP', serif;
  font-weight:900;
  align-items: center;
  background: #1F1F1F;
  color: antiquewhite;
  display: flex;
  height: 70px;
  line-height: 40px;
  overflow:hidden;
  width: 100%;
  white-space:nowrap;
  z-index: 1;
}
.bbs ul {
  animation: flowing 50s linear infinite;
  font-size: 45px;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}
.bbs ul li{
  display: inline-block;
  padding-right: 10px;
}
	
	
	
	
	
.presen{
 position: relative;/*相対配置*/
padding-top: 50px;
}
.presen-textarea{
margin: -5px 25px 90px 25px;
}
.presen-textarea p.black{
	    font-size: 14px;
    font-weight: 500;
	}

	.top{ 
    position: absolute;
    top: 8%;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 90px;
    color: #1E1E1E;
    transform: scaleX(0.9);
	}
.bottom{ 
  position: absolute;
top: 59%;
  right: 0;
  left: 0;
  margin: auto;
	font-size: 90px; 
	color: #1E1E1E;
	margin-bottom: 20px;
	}
	.boxC{padding: 0 30px;}
	
	p.sirohaikei{
    padding: 0 0 10px 0;
	}

span.big2{
	background-color:#fff;
	height: 200px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
font-size: 35px;
	line-height: 1.5em;
	letter-spacing: -.0em;
	}
span.big3{
 vertical-align: middle;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 19px;
	line-height: 1.5em;
	letter-spacing: 0.em;
	font-weight: 600;
	/*text-decoration: line-through;*/
	}
span.big4{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 13px;
	letter-spacing: .05em;
		font-weight: bold;
	text-align: left;
	}

	
.boxE{
background: #1E1E1E;/*antiquewhite*/;	
color:antiquewhite;
	margin: 0 auto;
	padding: 15px 10px 50px 10px;
}
.atten-kakoi{
		border: 2px solid antiquewhite;
	border-radius: 5px;
padding: 35px 20px;
}
	

}
/** SP版記述ここまで **/





@media screen and (min-width:481px) {
	/* ここにパソコン版だけの記述 */
#wrapper{width: 900px; margin: 0 auto;}
	
	span.moji {line-height: 2.5em}
p.big{
font-family: 'Noto Sans JP', sans-serif;
  line-height: 105px; color: #fff;
 font-weight: 900; font-size: 70px; }
.marker {
  background: linear-gradient(transparent 15%, rgba(220, 20, 60, 0.7) 0%);
	padding: 0 1px;
}
p.A{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 30px; color: #fff;
	letter-spacing: .02em;
}
p.B{
    font-family: 'Helvetica','Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    letter-spacing: .12em;
	margin-bottom: -9px;
}
p.C{
font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 14px 0;
	}
p.D{ font-size: 25px;}
p.eng{
	    font-size: 12px;
    letter-spacing: .26em;
    margin-right: 30px;
    font-family: Helvetica Neue, Helvetica, Arial;
    font-weight: 200;
}
p.small{
	font-size: 14px; letter-spacing: 1.1px; margin: 15px 0; line-height: 2em;}
p.black{color: #151515;
font-family: 'Zen Kaku Gothic New', sans-serif;font-size: 13px;line-height: 2em;
}
p.red{font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: .1em; line-height: 31px;
font-size: 17px; color: #ECECEC;}

.gaiyo{	font-family: 'Zen Kaku Gothic New', sans-serif;font-weight: 500;
font-size:17px; line-height: 2em; width: 400px; margin: 0 auto;}

	
.presen{
 position: relative;/*相対配置*/
text-align: center;
padding-top: 50px;
}
.presen-textarea{
margin: -40px 0 90px 0;
padding: 0 150px
	;}
.presen-textarea p.black{
	    font-size: 14px;
    font-weight: 500;
	}
	.top{ 
  position: absolute;
   top: 10%;
  right: 0;
  left: 0;
  margin: 0 auto;
    font-size: 150px;
	color: #1E1E1E;
	}
.middle{
    position: absolute;
    top: 45%;
    left: 35%;
    font-size: 20px;
    letter-spacing: .2em;
    background: crimson;
	}
.bottom{  position: absolute;/*絶対配置*/
    bottom: 5%;
	right: 0;
  left: 0;
    font-size: 150px;
	color: #1E1E1E;
	}
	.boxC{padding: 0 80px;}

.g_nav {
	font-family: 'Noto Serif JP', serif;
	background: #1F1F1F;
	padding: 10px 0 7px 0;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	color: antiquewhite;
}
.g_nav a{
text-decoration: none;
color:antiquewhite;
}
.g_nav li{
	    display: inline;
    margin: 10px 20px;
    font-size: 20px;
	}
	

span.big{
	font-size: 30px;
	line-height: 3em;
	font-weight: 500;
	letter-spacing: .05em;
	color: #333;
	}	


.bbs{
  color: crimson;
	font-family: 'Noto Serif JP', serif;
  font-weight:900;
  align-items: center;
  background: #1F1F1F;
  color: antiquewhite;
  display: flex;
  height: 100px;
  line-height: 40px;
  overflow:hidden;
  width: 100%;
  white-space:nowrap;
  z-index: 1;
}
.bbs ul {
  animation: flowing 50s linear infinite;
  font-size: 60px;
  transform:translateX(100%);
  margin: 0;
  padding: 0;
}
.bbs ul li{
  display: inline-block;
  padding-right: 10px;
}	
	
	
.boxC{
		  z-index: 1;
	background: linear-gradient(-0deg, #F4F4F4 0%, #efe3d3 30%, #F4F4F4 50%, #f7e4dd 70%, #F4F4F4 100% );
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	text-align: left;
	color: #1F1F1F;
	line-height: 2em;
	font-size: 18px;
	margin: 40px 0;
}
.kakoi{border: 1px #999 solid; padding: 30px;  border-radius: 5px;
  background-color: rgba(255,255,255,0.60);
	line-height: 1.8em;
 font-size: 15px; margin: 20px 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 200;}

.boxE{
background: #1E1E1E;/*antiquewhite*/;	
color:antiquewhite;
	margin: 0 auto;
	padding: 15px 0 50px 0;
	width: 500px;
}
.atten-kakoi{
		border: 2px solid antiquewhite;
	border-radius: 5px;
padding: 20px;
}
	
	p.sirohaikei{
    padding: 0 0 20px 0;
	}
span.big2{
	background-color:#fff;
	height: 200px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
font-size: 39px;
	line-height: 1.5em;
	letter-spacing: -.01em;
	}
span.big3{
 vertical-align: middle;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 500;
font-size: 21px;
	line-height: 1.5em;
	letter-spacing: -.07em;
	/*text-decoration: line-through;*/
	}
span.big4{
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: 500;
font-size: 18px;
	letter-spacing: .05em;

	}
	span.big5{
	font-weight: 500;
font-size: 20px;
line-height: 2em;
	}

	
#can{width: 800px; margin: 0 auto;}	

}

/** PC版記述ここまで **/








img.embeddedimage {
    margin: 26px 0 0 0;
    border: solid 1px #d8e3ed;
}

.container{height: 10px; margin-bottom:30px; background: crimson;color: #fff}
header{	width: 100%; }


#textA{    padding: 20px 5px;
    background: crimson; color: #fff
}
.point{
	padding: 100px;
	margin: 35px 15px 15px 15px;
	background: url(../img/ptA.gif) no-repeat center ;background-size: contain;}
.boxA{
    padding: 10px 5px 0 5px;
  height: auto;
  margin: 0 auto;
  text-align: left;
  font-weight: 600;
  font-size: 30px;
  writing-mode: vertical-rl;
	color: #fff/*0D0D0D*/;
background-color: rgba(0,0,0,.23);
    -webkit-backdrop-filter: blur(1px) brightness(1.08);
	backdrop-filter: blur(1px) brightness(1.08);
}
.boxB{}


.presen-textarea a p{
border: 2px solid crimson;
padding: 10px;
}


@keyframes flowing {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}

/**/
.underline-before {

	
	background: linear-gradient(#444, #444) 0 100%/0 2px no-repeat;
	/*左から、カラー（始点と終点それぞれ同じものを指定）、position / サイズ横縦 繰り返しの有無 */

	transition: background 1s;
	/*トランジションの設定。下線を引く動きをアニメーションにするのに必要 */

	text-decoration: none;
	/*テキストの装飾の設定 */
}

.underline-after {
	background-size: 100% 2px;
  /* 変化後のスタイル。横サイズを0から100%に変えることで指定の文字列に下線を引く */
}
/**/

.line{    border-top: 1px #fff solid;
    /* margin: 15px 0 18px 0; */
     width: 90%;
    padding: 10px 0;
    margin: 0 auto;}
.line-crimson{border-top: 2px crimson solid;   }
.line-black{border-top: 1px  #666 dotted; margin: 50px 0;   }
/*.line-antique{border-top: 1px  antiquewhite dotted; margin: 30px 20px;   }*/

.atten{font-family: 'Noto Serif JP', serif;font-size: 15px; line-height: 2.2em; font-weight: bold;}

.boxD{
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	text-align: left;
	color: #1F1F1F;
	line-height: 2em;
	font-size: 14px;
	padding: 80px 0;
	text-align: center;
	letter-spacing: .06em;
	line-height: 2em;
  background-image: linear-gradient(90deg, rgba(224, 218, 250, 1), rgba(249, 215, 200, 1) 99%);
}


.syusai{
	font-family: 'Helvetica', 'Zen Kaku Gothic New', sans-serif;
background: url("../img/pattern.png") center / cover crimson;
	background-blend-mode:darken;
	  background-size: 90px;
height: auto;
	padding:20px 30px 25px 30px;
	color:antiquewhite;
	font-size: 13px;
	letter-spacing: .1em;
	line-height: 2em;
	display:block;
    text-shadow: 2px 1px 1px crimson, -2px 1px 2px blue;
}
.syusai a{color:antiquewhite;}

.left{float: left; width: 48%;}
.center{float: left; width: 1px; height: 80px; border-right: 1px dotted antiquewhite;}
.right{float: right; width: 48%;}
.clear{clear:both;}

.textarea{margin: 20px 30px 50px 30px;}
.sns-box{
width: 100%;
height: 100%;
padding: 20px 0;
color: crimson;
font-size: 42px;
  background-image: linear-gradient(90deg, rgba(224, 218, 250, 1), rgba(249, 215, 200, 1) 99%);
}
.sns-box ul li{ display:inline;}

footer{background: #1E1E1E; padding: 40px 20px 50px 20px; font-size: 12px; letter-spacing: .05em; line-height: 2em;  }
.footer p{color: antiquewhite;}

.first li{display: inline; margin: 0 5px;}

footer{text-align: center;}

/* スムーススクロール */
html{
  scroll-behavior: smooth;
}
/* トップに戻るボタン */
a.backToTop {
    background: crimson;
    width: 45px;
    height: 44px;
    position: fixed;
    right: 25px;
    bottom: 25px;
    opacity: 0;
    z-index: 999;
    border-radius: 9999px;
    display: inline-block;
    transition: opacity 0.8s;
    pointer-events: none;
}
/* 上三角 */
a.backToTop:before {
    display: inline-block;
    color: #FFF;
    line-height: 1;
    width: 0.8rem;
    height: 0.8em;
    border: 0.2em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    content: "";
    z-index: 1000;
    opacity: 1;
    left: 50%;
    top: 55%;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* hover時 */
a.backToTop:hover {
    opacity: 0.8 !important;
}

/**/
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}


.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/**/



tr.koumoku{line-height: .5em;}
p.sanka{background: tan; padding: 0 10px; color: white; font-weight: 100; border-radius: 20px; vertical-align:bottom; font-size: 13px;}
p.margin{padding: 0 20px;}