@charset "utf-8";
/*
Theme Name: loop-ac-website
Thema URI: https://loop-ac.jp/
Description: 行政書士e-LOOP法務事務所のホームページ
version:
Auther: Yoshioka
Auther URI:
*/


/*----------- 目次 --------------------
/*　webレスポンシブ用 pc⇒タブレット端末⇒スマホ
@media(min-width: 1201px){}
@media screen and (min-width:401px) and (max-width:1200px){}
@media(max-width: 480px){}
*/

/*　CSS更新時
82 fadein 二つ　1⇒0にする

/*　postmail-utf更新時　ナビゲーション親リンク開閉ボタン ----------
ボタン動作優先の為リンク無効化 ⇒　有効化
サブメニューがない部分はリンク有効化 ⇒　無効化
回転用の＋ボタンを右側に配置、0.5秒で動作完了　⇒　動作しない
サブメニューがない部分は個別に表示しない　⇒　サブメニュー無し、カテゴリリンク有効化
*/

/* 82 fadein 二つ　1⇒0にする */

/* 最下部　トップページ戻るボタン・シェアボタン・ブログボタンは完成後削除する */

/*----- commonのはじまり --------------------------------------*/
/* 初期化 */
html,body,h1,h2,div,p,span,a,ul,ol,li,dl,dt,dd,small,header,nav,main,article,section,aside,footer,#containar,#contents{
	margin:0;
	padding:0;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	text-align:left;
}
#container,header,nav,#contents,main,article,section,div,aside,footer{
	display: block;
	box-sizing: border-box;
}
#container{
	width: 100%;
	margin: auto;
}



/*---------- 基本共通事項-基本事項の調整　---------------*/
/* 基本フォントサイズ */
html{
	font-size: 16px;
}

body{
	font-family: 'Noto Serif JP', serif;
	line-height: 1.5;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
	
/* 各ページをふわっと表示させる */
	  animation: fadeIn 0s ease 0s 1 normal; /* fadeInの後の時間のみ変更 */
    -webkit-animation: fadeIn 0s ease 0s 1 normal;　/* fadeInの後の時間のみ変更 */
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}[InternetShortcut]


/* サービスメニューと事務所案内はふわっと出る */
/* ふわっとでてくる */
	.fadein{
		opacity: 0;
	}
	.fadein1{
		opacity: 0;
	/* 50px　⇒　0px　まで動くよ */
		transform: translateY(50px);
	/* 要素が1.5秒かけて表示される */
		transition: all 1.5s;	
	}

a{outline:none;border:none;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}


h1,h2,h3,h4,h5,h6{
	display: block;
	margin-top: 0.25em;
	margin-bottom: 0.5em;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
h1,h2,h3,h4,h5,h6,li,a,p,nav{
	color: #222;
}

p{
	font-size: 1.125em;
	line-height: 2em;
	margin-bottom: 1.25em;
	letter-spacing: 0.1em;
}

@media(min-width: 960px){
	p{
		font-size: 1.25em;
		line-height: 2.25em;
		margin-bottom: 1.25em;
	}
}

li{
	list-style-type: none;
	line-height: 2em;
	letter-spacing: 0.1em;
}

img{
	outline: none;
	border: none;
}

.catch img{
	display: none;
}

.screen-reader-text{
	display: none;
}
.search-submit{
	display: none;
}


/*---------- 基本共通事項-各ページの画像の調整 ---------------*/
/* 画像の大きさ調整 */
@media(min-width: 1201px){
	.img100{
		display: block;
		margin: auto;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}

	.img80{
		display: block;
		margin: auto;
		width: 70%;
		height: auto;
		box-sizing: border-box;
	}

	.img60{
		display: block;
		margin: auto;
		width: 60%;
		height: auto;
		box-sizing: border-box;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.img100{
		display: block;
		margin: auto;
		width: 90%;
		height: auto;
		box-sizing: border-box;
	}

	.img80{
		display: block;
		margin: auto;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}

	.img60{
		display: block;
		margin: auto;
		width: 70%;
		height: auto;
		box-sizing: border-box;
	}
}
@media(max-width: 480px){
	.img100{
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.img80{
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.img60{
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
}
/* 個別ページのキャッチアイ画像大枠 */
@media(min-width: 1201px){
	.main-headline{
		display: block;
		width: 80%;
		margin: auto;
		box-sizing: border-box;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.main-headline{
		display: block;
		width: 80%;
		margin: auto;
		box-sizing: border-box;
	}
}
@media(max-width: 480px){
	.main-headline{
		display: block;
		width: 100%;
		margin: auto;
		box-sizing: border-box;
	}
}

/* 大枠内で全体に表示 */
.main-headline img{
	width: 100%;
	height: auto;
}



/*---------- 基本共通事項-見出し ---------------*/
/* 大見出し */
@media(min-width: 1201px){
	h1{
		position: relative;
		display: block;
		margin: 1em;
		padding: 0.5em 0;
		width: auto;
		text-align: center;
		font-weight: bold;
		font-size: 2.5em;
		box-sizing: border-box;
	}

	h1::before {
		content: '';
		position: absolute;
		left: auto;
		transform: translateX(-65%);
		rotate: 45deg;
		width: 3.5em;
		height: 3.5em;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		background: #f4e1be;
		z-index: -1;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	h1{
		position: relative;
		display: block;
		margin: 1em;
		padding: 0.5em 0;
		width: auto;
		text-align: center;
		font-weight: bold;
		font-size: 2em;
		box-sizing: border-box;
	}

	h1::before {
		content: '';
		position: absolute;
		left: auto;
		transform: translateX(-65%);
		rotate: 45deg;
		width: 3.5em;
		height: 3.5em;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		background: #f4e1be;
		z-index: -1;
	}
}

@media(max-width: 480px){
	h1{
		display: block;
		position: relative;
		margin: 1.5em auto;
		padding: 0.5em 0;
		width: auto;
		text-align: center;
		font-weight: bold;
		font-size: 1.4em;
		box-sizing: border-box;
	}

	h1::before {
		content: '';
		position: absolute;
		left: 17%;
		top: 27%;
		transform: translateX(-65%);
		rotate: 45deg;
		width: 3.5em;
		height: 3.5em;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		background: #f4e1be;
		z-index: -1;
	}
}

/* 中見出し */
@media(min-width: 1201px){
	h2{
		position: relative;
		margin: 2em auto;
		padding: 1em;
		width: fit-content;
		text-align: center;
		font-weight: bold;
		font-size: 2em;
	}
	h2::before,h2::after {
		position: absolute;
		content: '';
		width: 30%;
		height: 0.15em;
		background-color: #e1bff5;
	}

	h2::before {
		top: 0;
		left: 0;
	}
	h2::after {
		bottom: 0;
		right: 0;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	h2{
		position: relative;
		margin: 2em auto;
		padding: 1em;
		width: fit-content;
		text-align: center;
		font-weight: bold;
		font-size: 1.75em;
	}
	h2::before,h2::after {
		position: absolute;
		content: '';
		width: 30%;
		height: 0.15em;
		background-color: #e1bff5;
	}

	h2::before {
		top: 0;
		left: 0;
	}
	h2::after {
		bottom: 0;
		right: 0;
	}
}

@media(max-width: 480px){
	h2{
		position: relative;
		margin: 2em auto;
		padding: 1em;
		width: fit-content;
		text-align: center;
		font-weight: bold;
		font-size: 1.3em;
	}
	h2::before,h2::after {
		position: absolute;
		content: '';
		width: 30%;
		height: 0.15em;
		background-color: #e1bff5;
	}

	h2::before {
		top: 0;
		left: 0;
	}
	h2::after {
		bottom: 0;
		right: 0;
	}	
}

/* 小見出し */
@media(min-width: 1201px){
	h3{
		margin: 2em 0 2em 1em;
		font-weight: bold;
		font-size: 1.75em;
	}

	h3::after {
		display: block;
		content: '';
		margin-top: 1em;
		width: 3.5em;
		height: 0.2em;
		background: #bff5d8;
	}
}

@media screen and (min-width:481px) and (max-width:1201px){
	h3{
		margin: 2em 0 2em 1em;
		font-weight: bold;
		font-size: 1.55em;
	}

	h3::after {
		display: block;
		content: '';
		margin-top: 1em;
		width: 3.5em;
		height: 0.2em;
		background: #bff5d8;
	}
}

@media(max-width: 480px){
	h3{
		margin: 2em 0 2em 1em;
		font-weight: bold;
		font-size: 1.2em;
	}

	h3::after {
		display: block;
		content: '';
		margin-top: 0.75em;
		width: 3.25em;
		height: 0.2em;
		background: #bff5d8;
	}
}

/* 最小見出し */
@media(min-width: 1201px){
	h4 {
		overflow: hidden;
		position: relative;
		font-weight: bold;
		font-size: 1.4em;
		text-align: left;
		padding: 1em 0 1em 3em;
		margin: 1.5em 0 1.5em 1em;
	}

	h4::before {
		content: "";
		width: 0.15em;
		height: 3em;
		background: #9ba6b0;
		transform: rotate(20deg);
		position: absolute;
		top: 0;
		left: 0.5em;
		z-index: -1;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	h4 {
		overflow: hidden;
		position: relative;
		font-weight: bold;
		font-size: 1.35em;
		text-align: left;
		padding: 1em 0 1em 2em;
		margin: 1.5em 0 1.5em 1em;
	}

	h4::before {
		content: "";
		width: 0.15em;
		height: 3em;
		background: #9ba6b0;
		transform: rotate(20deg);
		position: absolute;
		top: 0;
		left: 0.5em;
		z-index: -1;
	}
}

@media(max-width: 480px){
	h4 {
		overflow: hidden;
		position: relative;
		font-weight: bold;
		font-size: 1.1em;
		text-align: left;
		padding: 1em 0 1em 1.5em;
		margin: 1.5em 0 1.5em 1em;
	}

	h4::before {
		content: "";
		width: 0.15em;
		height: 2.5em;
		background: #9ba6b0;
		transform: rotate(20deg);
		position: absolute;
		top: 0.2em;
		left: 0.5em;
		z-index: -1;
	}
}

/*---------- 共通基本事項-リンクボタン ---------------*/
/* 新着情報リンク・カテゴリ別リンク */
@media(min-width: 1201px){
	.notice-box a{
		position: relative;
		display: block;
		margin: 1em auto;
		padding: 1em;
		width: 50%;
		letter-spacing: 0.1em;
		font-weight: bold;
		color: #222;
		text-align: center;
		border: 1px solid #777;
		background-color: #fcfcfc;
		box-shadow: 0.15em 0.15em 0.5em 0 #aaa;
		opacity: 1 !important;
	}
	.notice-box a:hover:before,.notice-box a:hover:after{
		top: 2px;
		left: 0;
		width: 100%;
		height: 1px;
		transition: width 0.4s;
	}
	.notice-box a:hover:after{
		top: auto;
		right: 0;
		left: auto;
		bottom: 2px;
	}
	.notice-box a:before,.notice-box a:after{
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background-color: #777;
	}
	.notice-box a:before{
		right: 3px;
	}
	.notice-box a:after{
		left: 3px;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.notice-box a{
		position: relative;
		display: block;
		margin: 1em auto;
		padding: 1em;
		width: 70%;
		letter-spacing: 0.1em;
		font-weight: bold;
		color: #222;
		text-align: center;
		border: 1px solid #777;
		background-color: #fcfcfc;
		box-shadow: 0.15em 0.15em 0.5em 0 #aaa;
		opacity: 1 !important;
	}
	.notice-box a:hover:before,.notice-box a:hover:after{
		top: 2px;
		left: 0;
		width: 100%;
		height: 1px;
		transition: width 0.4s;
	}
	.notice-box a:hover:after{
		top: auto;
		right: 0;
		left: auto;
		bottom: 2px;
	}
	.notice-box a:before,.notice-box a:after{
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background-color: #777;
	}
	.notice-box a:before{
		right: 3px;
	}
	.notice-box a:after{
		left: 3px;
	}
}

@media(max-width: 480px){
	.notice-box a{
		position: relative;
		display: block;
		margin: 1em auto;
		padding: 0.5em;
		width: 90%;
		letter-spacing: 0.1em;
		font-weight: bold;
		color: #222;
		text-align: center;
		border: 1px solid #777;
		background-color: #fcfcfc;
		box-shadow: 0.15em 0.15em 0.5em 0 #aaa;
		opacity: 1 !important;
	}
	.notice-box a:hover:before,.notice-box a:hover:after{
		top: 2px;
		left: 0;
		width: 100%;
		height: 1px;
		transition: width 0.4s;
	}
	.notice-box a:hover:after{
		top: auto;
		right: 0;
		left: auto;
		bottom: 2px;
	}
	.notice-box a:before,.notice-box a:after{
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background-color: #777;
	}
	.notice-box a:before{
		right: 3px;
	}
	.notice-box a:after{
		left: 3px;
	}	
}

/* 文中テキストリンク */
.text-link{
	font-weight: bold;
	color: #06f;
	font-size: 1.15em;
}
.text-link:hover{
	opacity: 0.8;
	text-decoration: underline;
}

/* 内部リンク 16文字まで */
@media(min-width: 1201px){
	.in-link{
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 2em auto;
		padding: 1.25em 0;
		font-weight: bold;
		width: 50%;
		font-size: 1.1em;
		color: #fff;
		background-color: #222;
		transition: 0.3s ease-in-out;
	}

	.in-link:before, .in-link:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 0.6rem;
		display: block;
		transition: all 0.3s;
	}
	.in-link:before{
		width: 1.4rem;
		height: 2px;
		background: #fff;
		transform: translateY(-50%);
	}
	.in-link:after{
		opacity: 0;
		width: 0;
		height: 0;
		border-top: solid 2px currentColor;
		border-right: solid 2px currentColor;
		transform: translateY(-50%) rotate(45deg);
	}
	.in-link:hover{
		opacity: 0.8;
	}
	.in-link:hover:before {
		width: 2rem;
	}
	.in-link:hover:after {
		opacity: 1;
		width: 10px;
		height: 10px;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.in-link{
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 2em auto;
		padding: 1.25em 0;
		font-weight: bold;
		width: 60%;
		font-size: 1em;
		color: #fff;
		background-color: #222;
		transition: 0.3s ease-in-out;
	}

	.in-link:before, .in-link:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 0.6rem;
		display: block;
		transition: all 0.3s;
	}
	.in-link:before{
		width: 1.4rem;
		height: 2px;
		background: #fff;
		transform: translateY(-50%);
	}
	.in-link:after{
		opacity: 0;
		width: 0;
		height: 0;
		border-top: solid 2px currentColor;
		border-right: solid 2px currentColor;
		transform: translateY(-50%) rotate(45deg);
	}
	.in-link:hover{
		opacity: 0.8;
	}
	.in-link:hover:before {
		width: 2rem;
	}
	.in-link:hover:after {
		opacity: 1;
		width: 10px;
		height: 10px;
	}
}

@media(max-width: 480px){
	.in-link{
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 2em auto;
		padding: 1.25em 0.5em;
		font-weight: bold;
		width: 90%;
		font-size: 0.875em;
		color: #fff;
		background-color: #222;
		transition: 0.3s ease-in-out;
	}

	.in-link:before, .in-link:after{
		content: "";
		position: absolute;
		top: 50%;
		right: 0.6rem;
		display: block;
		transition: all 0.3s;
	}
	.in-link:before{
		width: 1.4rem;
		height: 2px;
		background: #fff;
		transform: translateY(-50%);
	}
	.in-link:after{
		opacity: 0;
		width: 0;
		height: 0;
		border-top: solid 2px currentColor;
		border-right: solid 2px currentColor;
		transform: translateY(-50%) rotate(45deg);
	}
	.in-link:hover{
		opacity: 0.8;
	}
	.in-link:hover:before {
		width: 2rem;
	}
	.in-link:hover:after {
		opacity: 1;
		width: 10px;
		height: 10px;
	}
}
/* 外部リンク */
/* リンク外枠 */
.out-link-outer{
	display: block;
	width: 90%;
	margin: 4em auto 1em auto;
	box-sizing: border-box;
}
/* aタグ */
.out-link{
	position: relative;
	display: block;
	margin: 0;
	padding: 0.5em 0.25em;
	border: 0.15em solid #666;
	text-decoration: none;
	transition: 0.5s;
}
/* 参考リンク文字位置 */
.out-link_label{
	position:absolute;
	top: 0;
	left: 0;
	padding: 0.5em 0.75em;
	background-color: #222;
	color: #fff;
	font-size: 0.8em;
	transform: translate(-2px,-100%);
	border-radius: 6px 6px 0 0;
}
/* アイコン設置　現在使用無し */
.out-link_label::before{
	content:;
	font-size: 0.75em;
	font-weight: bold;
	color: #fff;
	margin-right: 0.45em;
}
/* リンク内枠 */
.out-link_body{
	display: flex;
	flex-direction: column-reverse;
	width: auto;
	margin: 0.5em;
}
/* サイト名 */
.out-link_site{
	color: #333;
	font-size: 0.8em;
}
/* アイコン設置　現在不使用 */
.out-link_site::before{
	content:;
	font-size:;
	font-weight: bold;
	margin-right: 0.7em;
}
/* 参考サイトタイトル名 */
.out-link_title{
	margin-bottom: 0.5em;
	padding: 0;
	color: #222;
	font-size: 1em;
	font-weight: bold;
}
/* マウスオーバーで動く */
.out-link:hover{
	background-color: #fefefc;
	transform: translateY(-4px);
	box-shadow: 0 0.35em 0.35em 0 rgba(0, 0, 0, 0.2);
}

/*----- スマホ・PC兼用 投稿用自己紹介リンク ---------- */
.intro-link{
    position: relative;
    display: table;
    margin: 2em 0 2em auto;
	margin-right: 0.5em;
    padding: 0.25em 0.25em;
	text-align: right;
    color: #222;
    transition: 0.3s ease-in-out;
    font-weight: 600;
}
.intro-link::before{
    position: absolute;
    bottom: 0px;
    left: 50%;
    content: '';
    width: 100%;
    height: 3px;
    background: rgba(150,150,150,0.3);
    transform: translateX(-50%);
}

.intro-link::after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: '';
    width: 100%;
    height: 3px;
    background: #222;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
}

.intro-link:hover{
    opacity: 0.7;
}
.intro-link:hover::after {
    transform: scale(1, 1);
}


/*---------- 基本共通事項-container ---------------*/
@media(min-width: 1201px){
	#container{
		display: block;
		box-sizing: border-box;
		width: 80%;
		margin: auto;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	#container{
		display: block;
		box-sizing: border-box;
		width: 85%;
		margin: auto;
	}
}

@media(max-width: 480px){
	#container{
		display: block;
		box-sizing: border-box;
		width: 95%;
		margin: auto;
	}
}


/*---------- 基本共通事項-ヘッダー ---------------*/
.header{
	margin-bottom: 2em;
}
@media(min-width: 1201px){
	#home img{
		margin-bottom: 8em;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
		#home img{
		margin-bottom: 5em;
	}
}
@media(max-width: 480px){
		#home img{
		margin-bottom: 3em;
	}
}
/*----- タイトルボックス-ロゴとキャッチコピー ----------*/
@media(min-width: 1201px){
	.title-box{
		display: flex;
		justify-content: flex-start;
	}
	.logo-box{
		margin: auto 0;
	}
	.logo-box img{
		width: 100%;
	}
	.cacth-midasi{
		margin: auto 0 auto 3em;
	}
	.cacth-midasi .catch-copy{
		font-size: 2.5em;
		line-height: 0.25em !important;
		margin: 1.25em auto !important;
	}
	.cacth-midasi .site-title{
		font-size: 1.68em;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.title-box{
		display: flex;
		justify-content: flex-start;
		margin-top: 3em;
	}
	.logo-box{
		margin: auto 0;
	}
	.logo-box img{
		width: 90%;
	}
	.cacth-midasi{
		margin: auto 0 auto 1em;
	}
	.cacth-midasi .catch-copy{
		margin-bottom: 0;
		font-size: 2.23em;
	}
	.cacth-midasi .site-title{
		font-size: 1.5em;
		margin-bottom: 0;
	}
}

@media(max-width: 480px){
	.title-box{
		display: flex;
		justify-content: flex-start;
		margin-top: 0.75em;
		width: 80%;
	}
	.logo-box{
		margin: auto 0;
		width: 20%;
	}
	.logo-box img{
		width: 100%;
	}
	.cacth-midasi{
		margin: auto auto auto 1em;
		width: 80%;
	}
	.cacth-midasi .catch-copy{
		margin-bottom: 0;
		font-size: 0.925em;
		line-height: 1.5em;
	}
	.cacth-midasi .site-title{
		font-size: 0.875em;
		margin-bottom: 0;
		line-height: 1.5em;
	}
}


/*----- グローバルナビゲーション ----------*/
/* ハンバーガーメニューボタン */
@media(min-width: 1201px){
	#nav-toggle {
	  position: fixed;
	  top: 55px;
	  right: 55px;
	  height: 55px;
	  cursor: pointer;

	  > div {
		position: relative;
		width: 70px;
	  }
	  span {
		width: 100%;
		height: 1px;
		left: 0;
		display: block;
		background: #333;
		position: absolute;
		transition: transform .6s ease-in-out, top .5s ease;

		&:nth-child(1) {
		  top: 0;
		}
		&:nth-child(2) {
		  top: 23px;
		}
		&:nth-child(3) {
		  top: 46px;
		}
	  }

	  &:hover span:nth-child(1) {
		top: 3px;
	  }
	  &:hover span:nth-child(3) {
		top: 40px;
	  }

	}

	.open {
	  #nav-toggle span {
		background: #fff;

		&:nth-child(1) {
		  top: 15px;
		  transform: rotate(45deg);
		}
		&:nth-child(2) {
		  top: 15px;
		  width: 0;
		  left: 50%;
		}
		&:nth-child(3) {
		  top: 15px;
		  transform: rotate(-45deg);
		}
	  }
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	#nav-toggle {
	  position: fixed;
	  top: 55px;
	  right: 55px;
	  height: 60px;
	  cursor: pointer;

	  > div {
		position: relative;
		width: 55px;
	  }
	  span {
		width: 100%;
		height: 1px;
		left: 0;
		display: block;
		background: #333;
		position: absolute;
		transition: transform .6s ease-in-out, top .5s ease;

		&:nth-child(1) {
		  top: 0;
		}
		&:nth-child(2) {
		  top: 23px;
		}
		&:nth-child(3) {
		  top: 46px;
		}
	  }

	  &:hover span:nth-child(1) {
		top: 3px;
	  }
	  &:hover span:nth-child(3) {
		top: 40px;
	  }

	}

	.open {
	  #nav-toggle span {
		background: #fff;

		&:nth-child(1) {
		  top: 15px;
		  transform: rotate(45deg);
		}
		&:nth-child(2) {
		  top: 15px;
		  width: 0;
		  left: 50%;
		}
		&:nth-child(3) {
		  top: 15px;
		  transform: rotate(-45deg);
		}
	  }
	}
}

@media(max-width: 480px){
	#nav-toggle {
	  position: fixed;
	  top: 25px;
	  right: 25px;
	  height: 32px;
	  cursor: pointer;

	  > div {
		position: relative;
		width: 36px;
	  }
	  span {
		width: 100%;
		height: 1px;
		left: 0;
		display: block;
		background: #333;
		position: absolute;
		transition: transform .6s ease-in-out, top .5s ease;

		&:nth-child(1) {
		  top: 0;
		}
		&:nth-child(2) {
		  top: 14px;
		}
		&:nth-child(3) {
		  top: 28px;
		}
	  }

	  &:hover span:nth-child(1) {
		top: 4px;
	  }
	  &:hover span:nth-child(3) {
		top: 23px;
	  }

	}

	.open {
	  #nav-toggle span {
		background: #fff;

		&:nth-child(1) {
		  top: 15px;
		  transform: rotate(45deg);
		}
		&:nth-child(2) {
		  top: 15px;
		  width: 0;
		  left: 50%;
		}
		&:nth-child(3) {
		  top: 15px;
		  transform: rotate(-45deg);
		}
	  }
	}	
}
	
/* ハンバーガーメニュー・×ボタンは常に最前面 */
#nav-toggle {
	z-index: 1000;
}

#container {
	z-index: 900;
}



/* メニューを左からスライドイン */
#gloval-nav {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}


#gloval-nav {
  a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    transition: color .6s ease;
    
    &:hover {
      color: #666;
    }
  }
  
  ul {
    list-style: none;
    
    li {
		opacity: 0;
		transform: translateX(200px);
		transition:  transform .6s ease, opacity .2s ease;
		&:nth-child(2) {
			transition-delay: .15s;
		}
		&:nth-child(3) {
			transition-delay: .3s;
		}
		&:nth-child(4) {
			transition-delay: .45s;
		}
		&:nth-child(5) {
			transition-delay: .6s;
		}
		&:nth-child(6) {
			transition-delay: .75s;
		}
		&:nth-child(7) {
			transition-delay: .9s;
		}
		&:nth-child(8) {
			transition-delay: 1.05s;
		}
		&:nth-child(9) {
			transition-delay: 1.2s;
		}
	  }
	}
}


/*----- グローバルナビゲーション ----------*/
@media(min-width: 1201px){
	.open {
	  overflow: hidden;

		#gloval-nav{
			visibility: visible;
			opacity: 1;
		}

		#gloval-nav li {
			opacity: 1;
			transform: translateX(0);
			transition:  transform 1s ease, opacity .9s ease;
		}
	}

	#gloval-nav{
		display: block;
	}
	#gloval-nav nav{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	#gloval-nav nav div div{
		height: 50%;
	}
	.sub-menu{
		margin-left: 1em;
		font-size: 0.75em;
	}
	.sub-menu li{
		line-height: 1.25em;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.open {
	  overflow: hidden;

		#gloval-nav{
			visibility: visible;
			opacity: 1;
		}

		#gloval-nav li {
			font-size: 0.65em;
			opacity: 1;
			transform: translateX(0);
			transition:  transform 1s ease, opacity .9s ease;
		}
	}

	#gloval-nav{
		display: block;
		overflow-y: scroll;
		scrollbar-width: 0.35em;
		scrollbar-color: #fefefe #eee;
	}
	#gloval-nav nav{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	#gloval-nav nav div div{
		height: 50%;
	}
	.sub-menu{
		margin-left: 1em;
		font-size: 1.25em;
	}
	.sub-menu li{
		line-height: 1.25em;
	}
}

@media(max-width: 480px){
	.open {
	  overflow: hidden;

		#gloval-nav{
			visibility: visible;
			opacity: 1;
		}


			#gloval-nav li {
			font-size: 0.75em;
			opacity: 1;
			transform: translateX(0);
			transition:  transform 1s ease, opacity .9s ease;
		}
	}

	#gloval-nav{
		display: block;
		overflow-y: scroll;
		scrollbar-width: 0.35em;
		scrollbar-color: #fefefe #eee;
	}
	#gloval-nav nav{
		display: block;
		justify-content: normal;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}
	#gloval-nav nav div div{
		height: 50%;
		margin-left: 0.5em;
	}
	.sub-menu{
		margin-left: 1.5em;
		font-size: 1.15em;
	}
	.sub-menu li{
		line-height: 1.25em;
	}
}

/*----- パンくずリスト 前デバイス共通----------*/
.bread-outer{
    display: inline-block;
    margin: 1em 0 1em 0.5em;
}
.bread ol{
	padding: 0;
	list-style: none;
}
.bread li a{
	padding: 0.3em 0.1em;
	color: #222;
	font-size: 0.6em;
	text-decoration: none;
	vertical-align: middle;
	text-shadow: none;
}
.bread li a[href]:hover{
	text-decoration: underline;
}

.bread li{
	float: left;
	width: auto;
	line-height: 1em;
}
.bread li:after{
	content: '\003e';
	margin-left: 0.25em;
	margin-right: 0.25em;
	color: #222;
}
.bread li:last-child:after{
	content: none;
}
.bread i{
	font-size: 1.5em;
	margin-left: 0.25em;
}
.bread span{
	display: none;
}

/*---------- トップページ-メインコンテンツ　---------------*/
/*----- 3つの選ばれる理由 ----------*/
@media(min-width: 1201px){
	.home-sec{
		display: block;
		margin-bottom: 7em;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.point-outer{
		display: flex;
		justify-content: space-around;
		margin-top: 8em;
		width: 95%;
		height: auto;
		box-sizing: border-box;
	}
	.point-inner{
		display: block;
		width: 30%;
		height: auto;
		background-color: #fff;
		box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
	}
	.point-illust{
		display: block;
		width: 100%;
		margin-top: -7em;
	}
	.point-illust img{
		display: block;
		width: 60%;
		height: auto;
		margin: 0 auto -3em auto;
	}
	.point-text{
		display: block;
		margin-top: -3em;
		padding: 1.5em;
	}
	.point-text p{
		font-size: 1em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.home-sec{
		display: block;
		margin-bottom: 7em;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.point-outer{
		display: flex;
		justify-content: space-around;
		margin-top: 8em;
		width: 95%;
		height: auto;
		box-sizing: border-box;
	}
	.point-inner{
		display: block;
		width: 30%;
		height: auto;
		background-color: #fff;
		box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
	}
	.point-illust{
		display: block;
		width: 100%;
		margin-top: -6em;
	}
	.point-illust img{
		display: block;
		width: 75%;
		height: auto;
		margin: 0 auto -2em auto;
	}
.point-midashi h3{
		font-size: 1.2em;
	}
	.point-text{
		display: block;
		margin-top: -1.5em;
		padding: 1em;
	}
	.point-text p{
		font-size: 0.875em;
	}
}

@media(max-width: 480px){
	.home-sec{
		display: block;
		margin-top: 1em;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.point-outer{
		display: block;
		justify-content: space-around;
		margin: 0 auto;
		width: 95%;
		height: auto;
		box-sizing: border-box;
	}
	.point-inner{
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: 2em;
		background-color: #fff;
		box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
	}
	.point-illust{
		display: block;
		width: 100%;
		margin-top: 0;
	}
	.point-illust img{
		display: block;
		width: 60%;
		height: auto;
		margin: 0 auto -3em auto;
	}
	.point-midashi h3{
		font-size: 1.65em;
	}
	.point-text{
		display: block;
		margin-top: -3em;
		padding: 1.5em;
	}
	.point-text p{
		font-size: 1em;
	}	
}

/*---------- 基本共通事項-サイドバー ---------------*/
/* 曜日フォントカラー　全デバイス共通 */
.business-hours .saturday{
	color:#0000ff;font-weight:bold;
}
.business-hours .sunday{
	color:#ff0000;font-weight:bold;
}

/*----- 営業時間・営業曜日 ----------*/
@media(min-width: 1201px){
	.business-hours{
		width: 80%;
		margin: auto;
	}
	.business-hours table{
		width: 80%;
		margin: 0.75em auto;
		border: solid 0.0625em #000000;
		box-sizing: border-box;
	}
	.business-hours th:first-child{
		font-weight: bold;
	}
	.business-hours th{
		width: 20%;
		padding: 0.25em 0;
		font-size: 1.125em;
		border: solid 0.0625em #000000;
		text-align: center;
		font-weight: bold;
	}
	.business-hours td{
		width: 40%;
		padding: 0.25em 0;
		font-size: 1.125em;
		font-weight: bold;
		text-align: center;
		border: solid 0.0625em #000000;
	}
	.business-hours p{
		font-size: 1em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.business-hours{
		width: 80%;
		margin: auto;
	}
	.business-hours table{
		width: 100%;
		margin: 0.75em auto;
		border: solid 0.0625em #000000;
		box-sizing: border-box;
	}
	.business-hours th:first-child{
		font-weight: bold;
	}
	.business-hours th{
		width: 20%;
		padding: 0.25em 0;
		font-size: 1.125em;
		border: solid 0.0625em #000000;
		text-align: center;
		font-weight: bold;
	}
	.business-hours td{
		width: 40%;
		padding: 0.25em 0;
		font-size: 1.125em;
		font-weight: bold;
		text-align: center;
		border: solid 0.0625em #000000;
	}
	.business-hours p{
		font-size: 1em;
	}
}

@media(max-width: 480px){
	.business-hours table{
		width: 100%;
		margin: 10px auto;
		border: solid 1px #000000;
		box-sizing: border-box;
	}
	.business-hours th:first-child{
		font-weight: bold;
	}
	.business-hours th{
		width: 20%;
		padding: 0.25em 0;
		font-size: 1em;
		border: solid 1px #000000;
		text-align: center;
		font-weight: bold;
	}
	.business-hours td{
		width: 40%;
		padding: 0.25em 0;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		border: solid 1px #000000;
	}
	.business-hours p{
		font-size: 0.75em;
	}
}

/*----- 混雑状況ボックス ----------*/
@media(min-width: 1201px){
	.datetime-outer{
		display: table;
		margin: 2em auto;
		padding: 0.65em 1.3em;
		font-size: 1.75em;
		border: outset 0.15em #ddd;
	}
	.status p{
		margin-bottom: 0;
		text-align: center;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.datetime-outer{
		display: table;
		margin: 1.25em auto;
		padding: 0.55em 1.1em;
		font-size: 1.45em;
		border: outset 0.15em #ddd;
	}
	.status p{
		margin-bottom: 0;
		text-align: center;
	}
}
@media(max-width: 480px){
	.datetime-outer{
		display: table;
		margin: 1.2em auto;
		padding: 0.4em 0.8em;
		font-size: 1.45em;
		border: outset 0.15em #ddd;
	}
	.status p{
		margin-bottom: 0;
		text-align: center;
	}
}


/*---------- 事務所案内4つ ---------------*/
@media(min-width: 1201px){
	.office-flex{
		display: flex;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.office-li{
		display: block;
		width: 40%;
		margin: 2em;
	}
	.office-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.office-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.office-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.office-text-frame{
		margin-top: 1em;
		width: 100%;
		height: auto;
		padding: 0 0.5em 0.5em 0.5em;
	}
	.office-midashi{
		margin: 0;
		font-size: 1.5em;
		text-align: center;
	}
	.office-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.small-text{
		font-size: 0.75em;
		margin-bottom: 1em;
		text-align: center;
	}
	.office-text{
		font-size: 1em;
	}
	.office-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.office-flex{
		display: flex;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.office-li{
		display: block;
		width: 40%;
		margin: 1em;
	}
	.office-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.office-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.office-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.office-text-frame{
		margin-top: 1em;
		width: 100%;
		height: auto;
		padding: 0 0.5em 0.5em 0.5em;
	}
	.office-midashi{
		margin: 0;
		font-size: 1.5em;
		text-align: center;
	}
	.office-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.small-text{
		font-size: 0.75em;
		margin-bottom: 1em;
		text-align: center;
	}
	.office-text{
		font-size: 1em;
	}
	.office-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
}

@media(max-width: 480px){
	.office-flex{
		display: block;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.office-li{
		display: block;
		width: 95%;
		margin: 0 auto 3em auto;
	}
	.office-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.office-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.office-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.office-text-frame{
		margin-top: 0;
		padding: 0 0.5em 0.5em 0.5em;
		width: 100%;
		height: auto;
	}
	.office-midashi{
		margin: 0;
		font-size: 1.5em;
		text-align: center;
	}
	.office-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.small-text{
		font-size: 0.75em;
		margin-bottom: 1em;
		text-align: center;
	}
	.office-text{
		font-size: 1em;
	}
	.office-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
}


/*---------- サービスメニュー6つ ---------------*/
@media(min-width: 1201px){
	.top-service-flex{
		display: flex;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.top-service-li{
		display: block;
		width: 30%;
		margin: 2em;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.top-service-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
	}
	.top-service-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.top-service-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.top-service-text-frame{
		margin-top: 1em;
		padding: 0 0.5em 0.5em 0.5em;
		width: 100%;
		height: auto;
	}
	.top-service-midashi{
		margin: 0;
		font-size: 1.5em;
		text-align: center;
	}
	.top-service-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.top-service-text{
		font-size: 1em;
	}
	.top-service-text-frame .arrow{
		position: absolute;
		bottom: 3em;
		width: 2em;
		height: auto;
		transform: translateX(0);
		transition: transform 0.5s ease;
	}
	.top-service-link:hover{
		opacity: 0.8;
	}
	.top-service-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
	.top-service-link:hover .arrow{
		transform: translateX(1em);
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.top-service-flex{
		display: flex;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.top-service-li{
		display: block;
		width: 30%;
		margin: 1em;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.top-service-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
	}
	.top-service-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.top-service-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.top-service-text-frame{
		margin-top: 1em;
		padding: 0 0.5em 0.5em 0.5em;
		width: 100%;
		height: auto;
	}
	.top-service-midashi{
		margin: 0;
		font-size: 1.2em;
		text-align: center;
	}
	.office-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.top-service-text{
		font-size: 1em;
	}
	.top-service-text-frame .arrow{
		position: absolute;
		bottom: 2em;
		width: 2em;
		height: auto;
		transform: translateX(0);
		transition: transform 0.5s ease;
	}
	.top-service-link:hover{
		opacity: 0.8;
	}
	.top-service-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
	.top-service-link:hover .arrow{
		transform: translateX(1em);
	}
}

@media(max-width: 480px){
	.top-service-flex{
		display: block;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}
	.top-service-li{
		display: block;
		width: 95%;
		margin: 0 auto 3em auto;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.top-service-link{
		overflow: hidden;
		display: inline-block;
		width: 100%;
	}
	.top-service-sozai{
		overflow: hidden;
		display: block;
		width: 100%;
		margin: 0 auto;

	}
	.top-service-sozai img{
		display: block;
		width: 100%;
		height: auto;
		transition: transform 1s ease;
	}
	.top-service-text-frame{
		margin-top: 0;
		padding: 0 0.5em 0.5em 0.5em;
		width: 100%;
		height: auto;
	}
	.top-service-midashi{
		margin: 0;
		font-size: 1.5em;
		text-align: center;
	}
	.top-service-midashi,h3::after{
		margin-top: 0.5em;
		margin-bottom: 1.25em;
	}
	.top-service-text{
		font-size: 1em;
	}
	.top-service-text-frame .arrow{
		position: absolute;
		right: 2em;
		width: 2em;
		height: auto;
		transform: translateX(0);
		transition: transform 0.5s ease;
	}
	.top-service-link:hover{
		opacity: 0.8;
	}
	.top-service-link:hover img{
		overflow: hidden;
		transform: scale(1.1,1.1);
		transition: transform 1s ease;
	}
	.top-service-link:hover .arrow{
		transform: translateX(1em);
	}
}


/*----- サーチボックス ----------*/
@media(min-width: 1201px){
	.search-field{
		display: block;
		margin: 1em auto;
		padding: 0.35em;
		width: 80%;
		height: auto;
		font-size: 1.35em;
		border-radius: 0.5em;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.search-field{
		display: block;
		margin: 1em auto;
		padding: 1em 0.5em;
		width: 80%;
		height: auto;
		font-size: 1.25em;
		border-radius: 0.5em;
	}	
}

@media(max-width: 480px){
	.search-field{
		display: block;
		margin: 0.5em auto;
		padding: 0.5em;
		width: 95%;
		height: auto;
		font-size: 1em;
		border-radius: 0.5em;
	}
}

/*---------- 基本共通事項-フッター　---------------*/
@media(min-width: 1201px){
	#footer{
		margin-bottom: 7em;
	}
	.footer-upper ul{
		margin-top: -2em;
	}
	.footer-upper li{
		margin-left: 2em;
	}
	.footer-middle p{
		margin: 2em 0;
		text-align: right;
		font-size: 1em;
	}
	.footer-under p{
		text-align: center;
		font-size: 1em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	#footer{
		margin-bottom: 6em;
	}
	.footer-upper ul{
		margin-top: -2em;
	}
	.footer-upper li{
		margin-left: 2em;
	}
	.footer-middle p{
		margin: 2em 0;
		text-align: right;
		font-size: 1em;
	}
	.footer-under p{
		text-align: center;
		font-size: 1em;
	}
}

@media(max-width: 480px){
	#footer{
		margin-bottom: 5em;
	}
	.footer-upper ul{
		margin-top: -2em;
	}
	.footer-upper li{
		margin-left: 2em;
	}
	.footer-middle p{
		margin: 2em 0;
		text-align: right;
		font-size: 0.75em;
	}
	.footer-under p{
		text-align: center;
		font-size: 0.75em;
	}
}

/*---------- カテゴリーページ専用 ---------------*/
.category-top{
	margin-bottom: 3em;
}
@media(min-width: 1201px){
	/* category共通 */
	.category-left,.category-right{
		position: relative;
		display: inline-block;
		margin-bottom: 2em;
		width: 100%;
		height: 450px;
		box-sizing: border-box;
	}

	.sozai-left img{
		width: auto;
		height: auto;
	}

	.category-h3 h3{
		margin-bottom: 0.5em !important;
	}
	.contents-inner{
		position: relative;
	}
	.category-text{
		margin-left: 3.75em !important;
		font-size: 1em !important;
	}

	.contents-inner .in-link{
			font-size: 0.875em !important;
	}

	/* 左に画像、右にテキストとリンク */
	.sozai-left{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.contents-right{	
		position: absolute;
		top: 0;
		right: 0;
		width: 60%;
		height: auto;
		z-index: 10;
	}
	.contents-link{
		position: absolute;
		top: 12em;
		right: 0;
		padding: 0.5em 0 !important;
		transform: Translate(-50%, -50%);
	}

	/* 左にテキストとリンク、右に画像 */
	.sozai-right{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		opacity: 1;
	}

	.contents-left{	
		position: absolute;
		top: 0;
		left: 0;
		width: 60%;
		height: auto;
		z-index: 10;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	/* category共通 */
	.category-left,.category-right{
		position: relative;
		display: inline-block;
		margin-bottom: 2em;
		width: 100%;
		height: 450px;
		box-sizing: border-box;
	}

	.sozai-left img{
		width: auto;
		height: auto;
	}

	.category-h3 h3{
		margin-bottom: 0.5em !important;
	}
	.contents-inner{
		position: relative;
	}
	.category-text{
		margin-left: 3.75em !important;
		font-size: 1em !important;
	}

	.contents-inner .in-link{
			font-size: 0.875em !important;
	}

	/* 左に画像、右にテキストとリンク */
	.sozai-left{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.contents-right{	
		position: absolute;
		top: 0;
		right: 0;
		width: 60%;
		height: auto;
		z-index: 10;
	}
	.contents-link{
		position: absolute;
		top: 12em;
		right: 0;
		padding: 0.5em 0 !important;
		transform: Translate(-50%, -50%);
	}

	/* 左にテキストとリンク、右に画像 */
	.sozai-right{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		opacity: 1;
	}

	.contents-left{	
		position: absolute;
		top: 0;
		left: 0;
		width: 60%;
		height: auto;
		z-index: 10;
	}
}
@media(max-width: 480px){
	/* category共通 */
	.category-left,.category-right{
		position: relative;
		display: block;
		margin-bottom: 2em;
		width: 100%;
		height: 270px;
		box-sizing: border-box;
	}

	.sozai-right img,.sozai-left img{
		width: 100%;
		height: auto;
	}

	.category-h3 h3{
		margin-top: 0.35em;
		margin-bottom: -0.75em !important;
		font-size: 1.1em;
	}
	.contents-inner{
		position: relative;
	}
	.category-text{
		margin-left: 1em !important;
		font-size: 0.875em !important;
	}

	.contents-inner .in-link{
			font-size: 0.875em !important;
	}

	/* 左に画像、右にテキストとリンク */
	.sozai-left{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		opacity: 0.4;
	}

	.contents-right{	
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 10;
	}
	.contents-link{
		position: absolute;
		top: 8em;
		left: 50%;
		padding: 0.5em 0 !important;
		transform: none;
		transform: translate(-50%, -50%);
	}

	/* 左にテキストとリンク、右に画像 */
	.sozai-right{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		 background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: cover;
		opacity: 0.4;
	}

	.contents-left{	
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 10;
	}
}

/*---------- 固定＆投稿メインページ ---------------*/
/*----- 事務所概要-風景 ----------*/
@media(min-width: 1201px){
	.office-lndscape ul{
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.office-lndscape ul li{
		width: 32%;
		height: auto;
	}

	.office-lndscape ul li img{
		width: 100%;
		height: auto;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){

}

@media(max-width: 480px){
	.office-lndscape ul{
		display: block;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.office-lndscape ul li{
		width: 100%;
		height: auto;
		margin: auto auto 1em auto;
	}

	.office-lndscape ul li img{
		width: 100%;
		height: auto;
	}
}
/*----- 事務所概要-ご案内 ----------*/
@media(min-width: 1201px){
	/* テーブル表作成 */
	.office-table{
		display: table;
		width: 70%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.office-table th,.office-table td{
		padding: 0.75em 0 0.75em 0.75em;
		font-size: 1.125em;
		border: dotted 0.1px #ccc;
		border-bottom: none;
	}
	/* 文字の大きさを合わせる */
	.office-table a{
		font-size: 1.125em !important;
		font-weight: normal !important;
	}
	/* 表の調整 */
	.office-table th:last-child,.office-table td:last-child{
		line-height: 2.25em;
		border-bottom: dotted 0.1px #ccc;
	}
	/* 項目設定 */
	.office-table th{
		width: 30%;
		background-color: #eee;
		border-right: none;
	}
	/* 説明設定 */
	.office-table td{
		width: 70%;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	/* テーブル表作成 */
	.office-table{
		display: table;
		width: 80%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.office-table th,.office-table td{
		padding: 0.75em 0 0.75em 0.75em;
		font-size: 1.125em;
		line-height: 1.75em;
		border: dotted 0.1px #ccc;
		border-bottom: none;
	}
	/* 文字の大きさを合わせる */
	.office-table a{
		font-size: 1.125em !important;
		font-weight: normal !important;
	}
	/* 表の調整 */
	.office-table th:last-child,.office-table td:last-child{
		border-bottom: dotted 0.1px #ccc;
	}
	/* 項目設定 */
	.office-table th{
		width: 30%;
		background-color: #eee;
		border-right: none;
	}
	/* 説明設定 */
	.office-table td{
		width: 70%;
	}
}
@media(max-width: 480px){
	/* テーブル表作成 */
	.office-table{
		display: table;
		width: 100%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.office-table th,.office-table td{
		padding: 0.75em 0 0.75em 0.75em;
		line-height: 1.875em;
		font-size: 0.875em;
		border: dotted 0.1px #ccc;
		border-bottom: none;
	}
	/* 文字の大きさを合わせる */
	.office-table a{
		font-size: 0.875em !important;
		font-weight: normal !important;
	}
	/* 表の調整 */
	.office-table th:last-child,.office-table td:last-child{
		border-bottom: dotted 0.1px #ccc;
	}
	/* 項目設定 */
	.office-table th{
		width: 30%;
		background-color: #eee;
		border-right: none;
	}
	/* 説明設定 */
	.office-table td{
		width: 70%;
		background-color: #fafafa;
	}
}

/*----- 事務所概要-事業案内 ----------*/
@media(min-width: 1201px){
	/* 横並び用の枠 ol・ulどちらにも使用できるようになっている*/
	.business-details-frame{
		display: flex;
		justify-content: space-around;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	/* 事業ごとの外枠 */
	.business-details-list-outer{
		position: relative;
		display: block;
		margin: 2em 0;
		padding: 1em 2em;
		width: 30%;
		border-top: solid 2px #bff5d8;
		border-bottom: solid 2px #bff5d8;
	}

	/* 枠線の位置や太さなど調整1 */
	.business-details-list-outer:before, .business-details-list-right:after {
		position: absolute;
		top: -12px;
		width: 2px;
		height: -webkit-calc(100% + 24px);
		height: calc(100% + 24px);
		background-color: #bff5d8;
		content: "";
	}

	/* 枠線の位置や太さなど調整2 */
	.business-details-list-outer:before {
		left: 12px;
	}

	/* 枠線の位置や太さなど調整3 */
	.business-details-list-outer:after {
		right: 12px;
	}

	/* 事業内容カテゴリ別タイトル */
	.business-details-list-title h3{
		margin: 0;
		margin-bottom: 1em;
		font-weight:bold;
		font-size: 1.25em;
		color: #6cc2a5;
		text-align: center;
	}

	.business-details-list-title h3::after{
			display: initial;
			content: normal;
			margin-top: 0;
			width: auto;
			height: auto;
	}

	/* チェックボタンの調整 */
	.business-details-list-outer ul,.business-details-list-outer ol {
		position: relative;
		margin: 0;
		padding: 0 0.75em 0.75em;
		color: #bff5d8;
		border: none;
		list-style-type: none;
	}

	/* 各リストの設定 */
	.business-details-list-outer ul li,.business-details-list-outer ol li {
		line-height: 1.5;
		padding: 0.5em 0 0.5em 0;
		font-size: 0.875em;
		border-bottom: dashed 1px #bff5d8;
	}

	/* リストスタイル-チェックアイコン */
	.business-details-list-outer ul li:before,.business-details-list-outer ol li:before{
		content: "✓";
		position: absolute;
		left: -0.5em;
		margin: 0.75em 0 0 0;
		padding-left: 0;
		line-height: 0;
		font-size: 1em;
		color: #9dd3b6;
	}
	.business-details-frame p{
		font-size: 1em;
		line-height: 1.75em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	/* 横並び用の枠 ol・ulどちらにも使用できるようになっている*/
	.business-details-frame{
		display: flex;
		justify-content: space-around;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	/* 事業ごとの外枠 */
	.business-details-list-outer{
		position: relative;
		display: block;
		margin: 2em 0;
		padding: 1em 2em;
		width: 32%;
		border-top: solid 2px #bff5d8;
		border-bottom: solid 2px #bff5d8;
	}

	/* 枠線の位置や太さなど調整1 */
	.business-details-list-outer:before, .business-details-list-right:after {
		position: absolute;
		top: -12px;
		width: 2px;
		height: -webkit-calc(100% + 24px);
		height: calc(100% + 24px);
		background-color: #bff5d8;
		content: "";
	}

	/* 枠線の位置や太さなど調整2 */
	.business-details-list-outer:before {
		left: 12px;
	}

	/* 枠線の位置や太さなど調整3 */
	.business-details-list-outer:after {
		right: 12px;
	}

	/* 事業内容カテゴリ別タイトル */
	.business-details-list-title h3{
		margin: 0;
		margin-bottom: 1em;
		font-weight:bold;
		font-size: 1.05em;
		color: #6cc2a5;
		text-align: center;
	}

	.business-details-list-title h3::after{
			display: initial;
			content: normal;
			margin-top: 0;
			width: auto;
			height: auto;
	}

	/* チェックボタンの調整 */
	.business-details-list-outer ul,.business-details-list-outer ol {
		position: relative;
		margin: 0;
		padding: 0 0.75em 0.75em;
		color: #bff5d8;
		border: none;
		list-style-type: none;
	}

	/* 各リストの設定 */
	.business-details-list-outer ul li,.business-details-list-outer ol li {
		line-height: 1.5;
		padding: 0.5em 0 0.5em 0;
		font-size: 0.775em;
		border-bottom: dashed 1px #bff5d8;
	}

	/* リストスタイル-チェックアイコン */
	.business-details-list-outer ul li:before,.business-details-list-outer ol li:before{
		content: "✓";
		position: absolute;
		left: -0.5em;
		margin: 0.75em 0 0 0;
		padding-left: 0;
		line-height: 0;
		font-size: 1em;
		color: #9dd3b6;
	}
	.business-details-frame p{
		font-size: 1em;
		line-height: 1.75em;
	}
}
@media(max-width: 480px){
	/* 横並び用の枠 ol・ulどちらにも使用できるようになっている*/
	.business-details-frame{
		display: block;
		justify-content: flex-start;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	/* 事業ごとの外枠 */
	.business-details-list-outer{
		position: relative;
		display: block;
		margin: 3em 0;
		padding: 1em 2em;
		width: 100%;
		border-top: solid 2px #bff5d8;
		border-bottom: solid 2px #bff5d8;
	}

	/* 枠線の位置や太さなど調整1 */
	.business-details-list-outer:before, .business-details-list-right:after {
		position: absolute;
		top: -12px;
		width: 2px;
		height: -webkit-calc(100% + 24px);
		height: calc(100% + 24px);
		background-color: #bff5d8;
		content: "";
	}

	/* 枠線の位置や太さなど調整2 */
	.business-details-list-outer:before {
		left: 12px;
	}

	/* 枠線の位置や太さなど調整3 */
	.business-details-list-outer:after {
		right: 12px;
	}

	/* 事業内容カテゴリ別タイトル */
	.business-details-list-title h3{
		margin: 0;
		margin-bottom: 1em;
		font-weight:bold;
		font-size: 1.25em;
		color: #6cc2a5;
		text-align: center;
	}

	.business-details-list-title h3::after{
			display: initial;
			content: normal;
			margin-top: 0;
			width: auto;
			height: auto;
	}

	/* チェックボタンの調整 */
	.business-details-list-outer ul,.business-details-list-outer ol {
		position: relative;
		margin: 0;
		padding: 0 0.75em 0.75em;
		color: #bff5d8;
		border: none;
		list-style-type: none;
	}

	/* 各リストの設定 */
	.business-details-list-outer ul li,.business-details-list-outer ol li {
		line-height: 1.5;
		padding: 0.5em 0 0.5em 0;
		font-size: 0.785em;
		border-bottom: dashed 1px #bff5d8;
	}

	/* リストスタイル-チェックアイコン */
	.business-details-list-outer ul li:before,.business-details-list-outer ol li:before{
		content: "✓";
		position: absolute;
		left: -0.5em;
		margin: 0.75em 0 0 0;
		padding-left: 0;
		line-height: 0;
		font-size: 1em;
		color: #9dd3b6;
	}
	.business-details-frame p{
		font-size: 0.925em;
		line-height: 1.45em;
	}
}

/*---------- 地図アクセス ---------------*/
@media(min-width: 1201px){
	.shozaiti-text{
		display: block;
		margin-bottom: 0.5em;
		line-height: 1.5em;
		font-weight: bold;
		font-size: 2.25em;
		text-align: center;
	}
	.map{
		display: block;
		width: 95%;
		margin: auto;
	}
	.map iframe{
		width: 100%;
		height: 800px;
	}
	.access{
		display: block;
		width: 100%;
		height: auto;
		margin: 2em auto;
	}
	.access-img{
		display: block;
		margin: 4em auto 2em auto;		
	}
	.access-img img{
		display: block;
		margin: auto;
		width: 70%;
		height: auto;
	}
	.access-text{
		font-size: 1.35em;
		text-align: center;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.shozaiti-text{
		display: block;
		margin-bottom: 0.35em;
		line-height: 1.5em;
		font-weight: bold;
		font-size: 1.75em;
		text-align: center;
	}
	.map{
		display: block;
		width: 95%;
		margin: auto;
	}
	.map iframe{
		width: 100%;
		height: 800px;
	}
	.access{
		display: block;
		width: 100%;
		height: auto;
		margin: 2em auto;
	}
	.access-img{
		display: block;
		margin: 4em auto 2em auto;		
	}
	.access-img img{
		display: block;
		margin: auto;
		width: 80%;
		height: auto;
	}
	.access-text{
		font-size: 1.35em;
		text-align: center;
	}
}

@media(max-width: 480px){
	.shozaiti-text{
		display: block;
		line-height: 1.1em;
		font-weight: bold;
		font-size: 1.1875em;
		text-align: center;
	}
	.map{
		display: block;
		width: 100%;
		margin: auto;
	}
	.map iframe{
		width: 100%;
		height: 330px;
	}
	.access{
		display: block;
		width: 100%;
		height: auto;
		margin: 2em auto;
	}
	.access-img{
		display: block;
		margin: 4em auto 1em auto;		
	}
	.access-img img{
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
	}
	.access-text{
		margin-bottom: 1em;
		font-size: 1.15em;
		text-align: left;
	}
}

/*---------- 代表者挨拶 ---------------*/
@media(min-width: 1201px){
	.aisatsu-outer{
		display: flex;
		justify-content: space-around;
		margin: 5em auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	
	.aisatsu-img{
		margin-left: 0.5em;
		width: 100%;
	}
	.aisatsu-img img{
		display: block;
		margin: auto;
		width: 70%;
		height: auto;
	}
	.aisatsu-text-outer{
		display: block;
		width: 100%;
	}
	.aisatsu-text{
		margin-bottom: 2em;
		font-size: 1em;
		letter-spacing: 0.1em;
		line-height: 2.25em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.aisatsu-outer{
		display: flex;
		justify-content: space-around;
		margin: 2em auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	
	.aisatsu-img{
		margin-left: 0.5em;
		width: 100%;
	}
	.aisatsu-img img{
		display: block;
		margin: 10em auto 1em auto;
		width: 70%;
		height: auto;
	}
	.aisatsu-text-outer{
		display: block;
		width: 100%;
	}
	.aisatsu-text{
		margin-bottom: 2em;
		font-size: 1em;
		letter-spacing: 0.1em;
		line-height: 2.25em;
	}
}

@media(max-width: 480px){
	.aisatsu-outer{
		display: block;
		justify-content: flex-start;
		margin: 3em auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	
	.aisatsu-img{
		margin-left: 0;
		margin-bottom: 1em; 
		width: 100%;
	}
	.aisatsu-img img{
		display: block;
		margin: auto;
		width: 80%;
		height: auto;
	}
	.aisatsu-text-outer{
		display: block;
		padding: 0.5em;
		width: 100%;
	}
	.aisatsu-text{
		margin-bottom: 2em;
		font-size: 0.875em;
		letter-spacing: 0.1em;
		line-height: 1.875em;
	}
}

/*----- プライバシーポリシー ----------*/
.e-loop-privacy p{
	font-size: 0.875em;
}
.privacypolicy-disc li{
	margin: 0.25em 0 0.15em 2em;
	padding-left: 1em;
	line-height: 1.5em;
	font-size: 0.875em;
	list-style-type: disc;
}

/*---------- ブログindexページ ---------------*/
@media(min-width: 1201px){
	.single-box{
		margin-top: 5em;
	}
	.kiji-link{
		display: flex;
		justify-content: space-around;
		margin: 1em auto 3em auto;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.index-left{
		display: block;
		margin: auto;
		width: 34%;
		height: auto;
	}
	.index-left img{
		width: 95%;
		height: auto;
	}
	.index-right{
		display: block;
		margin-top: 3.35em;
		width: 64%;
		height: auto;
	}
	.index-right h2{
		margin: 0 0 1em 1em;
		padding: 0.5em 0;
		font-size: 1.5em;
	}
	.index-right p{
		margin: 0 0 1em 1em;
		padding: 0.5em 0;
		font-size: 1em;
	}
	.index-right .kiji-ymd{
		margin: 0 0 0 1em;
		padding: 0;
	}
	.index-right .blogtop-link{
		display: block;
		text-align: right;
	}
	.index-right .blogtop-link a{
		margin: 0 0 1em 1em;
		padding: 0.5em 1em 0.5em 0;
		font-size: 1.25em;
		color: #06f;
	}
	.index-right .blogtop-link a:hover{
		opacity: 0.8;
		text-decoration: underline;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
	.single-box{
		margin-top: 5em;
	}
	.kiji-link{
		display: flex;
		justify-content: space-around;
		margin: 1em auto 3em auto;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.index-left{
		display: block;
		margin: auto;
		width: 40%;
		height: auto;
	}
	.index-left img{
		width: 100%;
		height: auto;
	}
	.index-right{
		display: block;
		margin-top: 3.35em;
		width: 60%;
		height: auto;
	}
	.index-right h2{
		margin: 0 0 1em 1em;
		padding: 0.5em 0;
		font-size: 1.5em;
	}
	.index-right p{
		margin: 0 0 1em 1em;
		padding: 0.5em 0;
		font-size: 1em;
	}
	.index-right .kiji-ymd{
		margin: 0 0 0 1em;
		padding: 0;
	}
	.index-right .blogtop-link{
		display: block;
		text-align: right;
	}
	.index-right .blogtop-link a{
		margin: 0 0 1em 1em;
		padding: 0.5em 1em 0.5em 0;
		font-size: 1.25em;
		color: #06f;
	}
	.index-right .blogtop-link a:hover{
		opacity: 0.8;
		text-decoration: underline;
	}
}
@media(max-width: 480px){
	.single-box{
		margin-top: 3em;
	}
	.kiji-link{
		display: block;
		justify-content: flex-start;
		margin: 3em auto;
		background-color: #fff;
		box-shadow: 0.25em 0.25em 0.75em #ccc;
	}
	.index-left{
		display: block;
		margin: auto;
		width: 95%;
		height: auto;
	}
	.index-left img{
		width: 100%;
		height: auto;
	}
	.index-right{
		display: block;
		margin-top: 0.5em;
		width: 95%;
		height: auto;
	}
	.index-right h2{
		margin: 0.5em auto;
		padding: 0.5em 0;
		font-size: 1.5em;
	}
	.index-right p{
		margin: 0 0 0.5em 1em;
		padding: 0;
		font-size: 1em;
	}
	.index-right .kiji-ymd{
		margin: 0 0 0 1em;
		padding: 0;
	}
	.index-right .blogtop-link{
		display: block;
		text-align: right;
	}
	.index-right .blogtop-link a{
		margin: 0;
		padding: 0.5em 0.25em 0.5em 0;
		font-size: 1.25em;
		color: #06f;
	}
	.index-right .blogtop-link a:hover{
		opacity: 0.8;
		text-decoration: underline;
	}
}

/*---------- トップに戻る ---------------*/
#page-top a img{
	position: fixed;
	bottom: 1em;
	right: 0.75em;
	display: block;
	line-height: 1em; 
	text-align: center;
	font-weight: bold;
	font-size: 0.75em;
	color: #ee0;
	border: solid 5px #999;
	border-radius: 50%;
	text-decoration: none;
	background-color: #fff;
	z-index: 300;
	opacity: 0.8;
}
#page-top a img:hover{
	text-decoration: none;
	opacity: 0.6;
}
@media(min-width: 834px){
	#page-top a img{
		position: fixed;
		bottom: 1em;
		right: 0.35em;
		font-size: 1em;
		z-index: 300;
		opacity: 0.8;
	}
}

/*---------- シェアボタン ---------------*/
@media(min-width: 1201px){
	.share{
		position: relative;
		margin: 3em 0;
		z-index: 100;
	}
	.share ul{
		position: fixed;
		bottom: 1em;
		left: 0;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.share li{
		margin: 0 3em;
		line-height: 0;
	}
	.share a{
		display: block;
		width: 100%;
		text-decoration: none;
	}
	.share a:hover{
		opacity: 0.8;
	}
	.share a img{
		width: 150%;
		height: auto;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.share{
		position: relative;
		margin: 3em 0;
		z-index: 100;
	}
	.share ul{
		position: fixed;
		bottom: 1em;
		left: 0;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.share li{
		margin: 0 2em;
		line-height: 0;
	}
	.share a{
		display: block;
		width: 100%;
		text-decoration: none;
	}
	.share a:hover{
		opacity: 0.8;
	}
	.share a img{
		width: 125%;
		height: auto;
	}
}

@media(max-width: 480px){
	.share{
		position: relative;
		margin: 3em 0;
		z-index: 100;
	}
	.share ul{
		position: fixed;
		bottom: 1em;
		left: 0;
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}
	.share li{
		margin: 0 0.75em;
		line-height: 0;
	}
	.share a{
		display: block;
		width: 100%;
		text-decoration: none;
	}
	.share a:hover{
		opacity: 0.8;
	}
	.share a img{
		width: 100%;
		height: auto;
	}
}

/*---------- 各ページ共通事項　---------------*/
/*----- 基本テーブル -----*/
@media(min-width: 1201px){
	/* テーブル表作成 */
	.basic-table{
		display: table;
		width: 75%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.basic-table th,.basic-table td{
		vertical-align: baseline;
		width: 50%;
		padding: 0.75em 0 0.75em 0;
		line-height: 2.25em;
	}
	.basic-table th,.basic-table td{
		border-right: dotted 1px #999;
		border-bottom: dotted 1px #999;
	}
	.basic-table th:first-child,.basic-table td:first-child{
		border-left: dotted 1px #999;
	}
	/* 文字の大きさを合わせる */
	.basic-table a{
		font-size: 1.125em !important;
		font-weight: normal !important;
	}
	.basic-table th{
		vertical-align: middle;
		font-size: 1.35em;
		padding-left: 0.25em;
		text-align: left;
		background-color: #eee;	
	}
	.basic-table td{
		vertical-align: top;
		font-size: 1.35em;
		padding: 0.25em;	
	}
	.ryokin th{
		font-size: 1.35em;
		vertical-align: middle;
		border-top: dotted 1px #999;	
	}
	.ryokin td{
		font-size: 1.35em;
		vertical-align: middle;
		border-top: dotted 1px #999;	
	}
	.table-top th{
		font-size: 1.35em;
		border-top: dotted 1px #999;		
	}
	.table-top td{
		font-size: 1.35em;
		border-top: dotted 1px #999;		
	}
	.basic-table .komidashi{
		font-size: 1.25em;
		line-height: 2.5em;
		text-decoration: underline;
	}
	.table-text td{
		vertical-align: top;
		font-size: 1.15em;
	}
	.explanation td{
		vertical-align: top;
		padding: 0.35em;
		line-height: 2.25em;
		font-size: 1.15em;
		text-align: justify;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	/* テーブル表作成 */
	.basic-table{
		display: table;
		width: 85%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.basic-table th,.basic-table td{
		vertical-align: baseline;
		width: 50%;
		padding: 0.75em 0 0.75em 0;
		line-height: 2.25em;
	}
	.basic-table th,.basic-table td{
		border-right: dotted 1px #999;
		border-bottom: dotted 1px #999;
	}
	.basic-table th:first-child,.basic-table td:first-child{
		border-left: dotted 1px #999;
	}
	/* 文字の大きさを合わせる */
	.basic-table a{
		font-size: 1.125em !important;
		font-weight: normal !important;
	}
	.basic-table th{
		vertical-align: middle;
		font-size: 1.35em;
		text-align: center;
		background-color: #eee;	
	}
	.basic-table td{
		vertical-align: top;
		font-size: 1.35em;
		padding: 0.25em;	
	}
	.ryokin th{
		font-size: 1.25em;
		vertical-align: middle;
		padding-left: 0.25em;
		text-align: left;
		border-top: dotted 1px #999;	
	}
	.ryokin td{
		font-size: 1.25em;
		vertical-align: middle;
		border-top: dotted 1px #999;	
	}
	.table-top th{
		border-top: dotted 1px #999;		
	}
	.table-top td{
		border-top: dotted 1px #999;		
	}
	.basic-table .komidashi{
		font-size: 1.2em;
		line-height: 2.5em;
		text-decoration: underline;
	}
	.table-text td{
		vertical-align: top;
		font-size: 1.1em;
	}
	.explanation td{
		vertical-align: top;
		padding: 0.25em;
		line-height: 2em;
		font-size: 1em;
		text-align: justify;
	}
}
@media(max-width: 480px){
	/* テーブル表作成 */
	.basic-table{
		display: table;
		width: 100%;
		height: auto;
		margin: auto;
		box-sizing: border-box;
	}
	/* 項目と説明 */
	.basic-table th,.basic-table td{
		vertical-align: baseline;
		width: 50%;
		padding: 0.75em 0 0.75em 0;
		line-height: 2.25em;
	}
	.basic-table th{
		vertical-align: middle;
		font-size: 0.925em;
		text-align: left;
		padding-left: 0.25em;
		background-color: #eee;	
	}
	.basic-table td{
		vertical-align: middle;
		padding: 0.25em;
		font-size: 0.925em;
	}
	.basic-table th,.basic-table td{
		border-right: dotted 1px #999;
		border-bottom: dotted 1px #999;
	}
	.basic-table th:first-child, .basic-table td:first-child{
		border-left: dotted 1px #999;
	}

	/* 文字の大きさを合わせる */
	.basic-table a{
		font-size: 1.125em !important;
		font-weight: normal !important;
	}
	.basic-table th{
		vertical-align: middle;
		font-size: 1.25em;
		text-align: center;
		background-color: #eee;	
	}
	.basic-table td{
		vertical-align: top;
		font-size: 1.25em;
		padding: 0.25em;
	}
	.ryokin th{
		font-size: 1.1em;
		vertical-align: middle;
		border-top: dotted 1px #999;	
	}
	.ryokin td{
		font-size: 1.1em;
		vertical-align: middle;
		border-top: dotted 1px #999;	
	}
	.table-top th{
		border-top: dotted 1px #999;		
	}
	.table-top td{
		border-top: dotted 1px #999;		
	}
	.basic-table .komidashi{
		font-size: 1.05em;
		line-height: 2.5em;
		text-decoration: underline;
	}
	.table-text td{
		vertical-align: top;
		font-size: 0.925em;
	}
	.explanation td{
		vertical-align: top;
		padding: 0.25em;
		line-height: 1.75em;
		font-size: 0.925em;
		text-align: justify;
	}
}

/*----- フローデザイン ----------*/
@media(min-width: 1201px){
	.request-flow{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		width: 70%;
		height: auto;
		box-sizing: border-box;
	}
	.request-flow ul{
		padding: 0;
	}
	.request-flow li{
		list-style-type: none;
	}
	.request-flow dd{
		margin-left: 0;
		font-size: 1em;
	}
	.flow-list > li{
		padding: 40px 10px;;
	}
	.flow-list > li:not(:last-child){
		position: relative;
		border-bottom: 3px solid #e3d1ad;
	}
	.flow-list > li:not(:last-child)::before,
	.flow-list > li:not(:last-child)::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 15%;
		border: solid transparent;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.flow-list > li:not(:last-child)::before{
		border-width: 22px;
		border-top-color: #e3d1ad;
	}
	.flow-list > li:not(:last-child)::after{
		border-width: 18px;
		border-top-color: #fff;
	}
	.flow-list > li dl{
		margin: 0;
	}
	.flow-list > li dl dt{
		display: flex;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
		font-size: 1.3em;
		font-weight: 600;
		border-bottom: 2px dotted #878787;
	}
	.flow-list > li dl dt .chohokei {
		display: inline-block;
		margin-right: 0.5em;
		padding: 5px 10px;
		font-size: 0.6em;
		color: #fff;
		background: #e3d1ad;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.request-flow{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}
	.request-flow ul{
		padding: 0;
	}
	.request-flow li{
		list-style-type: none;
	}
	.request-flow dd{
		margin-left: 0;
		font-size: 1em;
	}
	.flow-list > li{
		padding: 40px 10px;;
	}
	.flow-list > li:not(:last-child){
		position: relative;
		border-bottom: 3px solid #e3d1ad;
	}
	.flow-list > li:not(:last-child)::before,
	.flow-list > li:not(:last-child)::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 15%;
		border: solid transparent;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.flow-list > li:not(:last-child)::before{
		border-width: 22px;
		border-top-color: #e3d1ad;
	}
	.flow-list > li:not(:last-child)::after{
		border-width: 18px;
		border-top-color: #fff;
	}
	.flow-list > li dl{
		margin: 0;
	}
	.flow-list > li dl dt{
		display: flex;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
		font-size: 1.3em;
		font-weight: 600;
		border-bottom: 2px dotted #878787;
	}
	.flow-list > li dl dt .chohokei {
		display: inline-block;
		margin-right: 0.5em;
		padding: 5px 10px;
		font-size: 0.6em;
		color: #fff;
		background: #e3d1ad;
	}
}

@media(max-width: 480px){
	.request-flow{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.request-flow ul{
		padding: 0;
	}
	.request-flow li{
		list-style-type: none;
	}
	.request-flow dd{
		margin-left: 0;
		font-size: 0.875em;
	}
	.flow-list > li{
		padding: 40px 10px;;
	}
	.flow-list > li:not(:last-child){
		position: relative;
		border-bottom: 3px solid #e3d1ad;
	}
	.flow-list > li:not(:last-child)::before,
	.flow-list > li:not(:last-child)::after{
		content: "";
		position: absolute;
		top: 100%;
		left: 15%;
		border: solid transparent;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.flow-list > li:not(:last-child)::before{
		border-width: 22px;
		border-top-color: #e3d1ad;
	}
	.flow-list > li:not(:last-child)::after{
		border-width: 18px;
		border-top-color: #fff;
	}
	.flow-list > li dl{
		margin: 0;
	}
	.flow-list > li dl dt{
		display: flex;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
		font-size: 1.3em;
		font-weight: 600;
		border-bottom: 2px dotted #878787;
	}
	.flow-list > li dl dt .chohokei {
		display: inline-block;
		margin-right: 0.5em;
		padding: 5px 10px;
		font-size: 0.6em;
		color: #fff;
		background: #e3d1ad;
	}
}

/*----- Q&Aデザイン ----------*/
@media(min-width: 1201px){
	.qa_list{
		display: block;
		margin: 3em auto;
		width: 70%;
		height: auto;
		box-sizing: border-box;
	}
	.qa_list dl{
		margin-bottom: 0.5em;
	}
	.qa_list dt{
		display: block;
		width: auto;
		margin: 0 auto;
		margin-bottom: 0.25em;
		padding: 0.35em;
		font-weight: bold;
		font-size: 1.25em;
		line-height: 2em;
		border-radius: 5px;
		background-color: #f4e1be;
	}
	.qa_list dt::before{
		content: "Q：";
		font-weight: bold;
		font-size: 1.25em;
	}
	.qa_list dt::after{
		content: "+";
		float: right;
		font-size: 1.5em;
		transition: transform 0.5s;
	}
	.qa_list dd{
		display: none;
		width: auto;
		margin: 0 auto;
		margin-bottom: 1.15em;
		padding: 0.35em;
		border-radius: 0.35em;
		border: dotted 1px #666;
		font-size: 1.25em;
		line-height: 2em;
	}
	.qa_list dd::before{
		content: "A：";
		font-weight: bold;
		font-size: 1.25em;
	}
	.click_deg::after{
		transform: rotateZ(135deg);
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.qa_list{
		display: block;
		margin: 3em auto;
		width: 80%;
		height: auto;
		box-sizing: border-box;
	}
	.qa_list dl{
		margin-bottom: 0.5em;
	}
	.qa_list dt{
		display: block;
		width: auto;
		margin: 0 auto;
		margin-bottom: 0.25em;
		padding: 0.35em;
		font-weight: bold;
		font-size: 1.15em;
		line-height: 2em;
		border-radius: 5px;
		background-color: #f4e1be;
	}
	.qa_list dt::before{
		content: "Q：";
		font-weight: bold;
		font-size: 1.15em;
	}
	.qa_list dt::after{
		content: "+";
		float: right;
		font-size: 1.5em;
		transition: transform 0.5s;
	}
	.qa_list dd{
		display: none;
		width: auto;
		margin: 0 auto;
		margin-bottom: 1.15em;
		padding: 0.35em;
		border-radius: 0.35em;
		border: dotted 1px #666;
		font-size: 1.15em;
		line-height: 2em;
	}
	.qa_list dd::before{
		content: "A：";
		font-weight: bold;
		font-size: 1.15em;
	}
	.click_deg::after{
		transform: rotateZ(135deg);
	}
}

@media(max-width: 480px){
	.qa_list{
		display: block;
		margin: 3em auto;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.qa_list dl{
		margin-bottom: 0.75em;
	}
	.qa_list dt{
		display: block;
		width: auto;
		margin: 0 auto;
		margin-bottom: 0.25em;
		padding: 0.35em;
		font-weight: bold;
		font-size: 1em;
		line-height: 2em;
		border-radius: 5px;
		background-color: #f4e1be;
	}
	.qa_list dt::before{
		content: "Q：";
		font-weight: bold;
		font-size: 1em;
	}
	.qa_list dt::after{
		content: "+";
		float: right;
		font-size: 1.5em;
		transition: transform 0.5s;
	}
	.qa_list dd{
		display: none;
		width: auto;
		margin: 0 auto;
		padding: 0.35em;
		border-radius: 0.35em;
		border: dotted 1px #666;
		font-size: 1em;
		line-height: 2em;
	}
	.qa_list dd::before{
		content: "A：";
		font-weight: bold;
		font-size: 1em;
	}
	.click_deg::after{
		transform: rotateZ(135deg);
	}
}

.page-area{
	margin-top: 3em;
}

/*---------- 基本共通事項-投稿ページ　---------------*/




	
/*----- リストスタイルボックス-ブログ用目次 ----------*/
@media(min-width: 1201px){
	.mokuji{
		width: 60%;
		font-size: 1em;
		margin: 1em auto;
		padding: 0.75em 0 0.75em 0.875em;
		border: dotted 1px #222;
		border-radius: 10px;
		background-color: #eeeeee;
	}
	.mokuji li{
		list-style-type: decimal;
	}

	.mokuji ul li{
		list-style-type: disc;
	}
	.mokuji ol li{
		list-style-type: decimal;
	}
	.mokuji a{
		font-size: 1em;
		color: #0000ff;
		text-decoration: underline;
	}
	.mokuji a:hover{
		color: #0066ff;
		text-decoration: underline;
	}
	.mokuji:before{
		padding-left: 3.5em;
		content: "--- 目次 ---";
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.mokuji{
		width: 80%;
		font-size: 1em;
		margin: 1em auto;
		padding: 0.75em 0 0.75em 0.875em;
		border: dotted 1px #222;
		border-radius: 10px;
		background-color: #eeeeee;
	}
	.mokuji li{
		list-style-type: decimal;
	}

	.mokuji ul li{
		list-style-type: disc;
	}
	.mokuji ol li{
		list-style-type: decimal;
	}
	.mokuji a{
		font-size: 1em;
		color: #0000ff;
		text-decoration: underline;
	}
	.mokuji a:hover{
		color: #0066ff;
		text-decoration: underline;
	}
	.mokuji:before{
		padding-left: 3.5em;
		content: "--- 目次 ---";
	}
}

@media(max-width: 480px){
	.mokuji{
		width: 95%;
		font-size: 1em;
		margin: 1em auto;
		padding: 0.75em 0 0.75em 0.875em;
		border: dotted 1px #222;
		border-radius: 10px;
		background-color: #eeeeee;
	}
	.mokuji li{
		list-style-type: decimal;
	}

	.mokuji ul li{
		list-style-type: disc;
	}
	.mokuji ol li{
		list-style-type: decimal;
	}
	.mokuji a{
		font-size: 1em;
		color: #0000ff;
		text-decoration: underline;
	}
	.mokuji a:hover{
		color: #0066ff;
		text-decoration: underline;
	}
	.mokuji:before{
		padding-left: 0.7em;
		content: "--- 目次 ---";
	}
}

/* リストスタイルボックス-ドロップシャドウ */
@media(min-width: 1201px){
.list-box-shadow{
		display: block;
		margin: 2em auto;
		padding: 1em 1em 1em 0;
		width: 60%;
		height: auto;
		box-shadow: 1em 1em 2.5em -0.5em #ccc;
	}
}
@media screen and (min-width:481px) and (max-width:1200px){
.list-box-shadow{
		display: block;
		margin: 2em auto;
		padding: 1em 1em 1em 0;
		width: 80%;
		height: auto;
		box-shadow: 0.35em 0.35em 1.25em 0.15em #ccc;
	}
}

@media(max-width: 480px){
.list-box-shadow{
		display: block;
		margin: 2em auto;
		padding: 1em 1em 1em 0;
		width: 95%;
		height: auto;
		box-shadow: 0.35em 0.35em 1.5em -0.5em #ccc;
	}
}


/*----- リストスタイルｰ基本 ----------*/
.disc li{
	margin: 0.25em 0 0.75em 2em;
	padding-left: 1em;
	line-height: 1.5em;
	font-size: 1em;
	list-style-type: disc;
}
.decimal li{
	margin: 0.25em 0 0.75em 2em;
	padding-left: 1em;
	line-height: 1.5em;
	font-size: 1em;
	list-style-type: decimal;
}
@media(min-width: 834px){
	.disc li{
		margin: 1em 2em 1em 5em;
		padding-left: 1em;
		line-height: 1.75em;
		font-size: 1em;
		list-style-type: disc;
	}
	.decimal li{
		margin: 1em 2em 1em 5em;
		padding-left: 1em;
		line-height: 1.75em;
		font-size: 1em;
		list-style-type: decimal;
	}
}

	
/*---- リストスタイル-記号 ----------*/
.list-check li:before{
	content: "✓";
	margin-right: 1.2em;
	color: #222;
}
.list-check li{
	line-height: 2.5em;
}
.list-maru li:before{
	content: "●";
	margin-right: 1em;
	color: #222;
}
.list-maru li{
	line-height: 2.5em;
}
.list-sankaku li:before{
	display: inline-block;
	content: "▲";
	transform: rotate(90deg);
	margin-right: 1em;
	color: pink;
}
.list-sankaku li{
	line-height: 2.5em;
	font-size: 0.65em;
}
.list-sikaku li:before{
	content: "■";
	margin-right: 1em;
	color: #222;
}
.list-sikaku li{
	line-height: 2.5em;
	font-size: 0.65em;
}

.list-kome li:before{
	content: "＊";
	margin-right: 1em;
	color: pink;
}
.list-kome li{
	line-height: 3em;
}
	
.list-daiya li:before{
	content: "◆";
	margin: auto 1em;
	color: #222;
}
.list-daiya{
	margin: auto 0;
}
.list-daiya li{
	line-height: 3em;
	font-size: 1em;
}
@media(min-width: 834px){
	.list-daiya li{
		line-height: 3em;
		font-size: 1.3em;
	}
}

/*----- フォント ----------*/
@media(min-width: 1201px){
	.bold-20{
		font-size: 1.25em;
		font-weight: bold;
		}
	.bold-24{
		font-size:1.5em;
		font-weight: bold;
		}
	.bold-28{
		font-size:1.75em;
		font-weight: bold;
		}
	.red-20{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-24{
		font-size: 1.5em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-28{
		font-size: 1.75em;
		font-weight: bold;
		color: #ff0000;
	}
	.pink-20{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-24{
		font-size: 1.5em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-28{
		font-size: 1.75em;
		font-weight: bold;
		color: #ff9999;
	}
	.note{
		font-size: 0.75em;
		line-height: 0;
	}
	.under-lb20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-lb24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-ora20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-ora24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-pink20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-pink24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-ye20{
		font-size: 1.25em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
		.under-ye24{
		font-size: 1.5em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
	.kasen{
			text-decoration: underline;
		}
	.under-line20{
		text-decoration:underline;
		font-size: 1.25em;
	}
	.under-line24{
		text-decoration:underline;
		font-size: 1.5em;
	}
}

@media screen and (min-width:481px) and (max-width:1200px){
	.bold-20{
		font-size: 1.25em;
		font-weight: bold;
		}
	.bold-24{
		font-size:1.5em;
		font-weight: bold;
		}
	.bold-28{
		font-size:1.75em;
		font-weight: bold;
		}
	.red-20{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-24{
		font-size: 1.5em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-28{
		font-size: 1.75em;
		font-weight: bold;
		color: #ff0000;
	}
	.pink-20{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-24{
		font-size: 1.5em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-28{
		font-size: 1.75em;
		font-weight: bold;
		color: #ff9999;
	}
	.note{
		font-size: 0.75em;
		line-height: 0;
	}
	.under-lb20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-lb24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-ora20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-ora24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-pink20{
		font-size: 1.25em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-pink24{
		font-size: 1.5em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-ye20{
		font-size: 1.25em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
		.under-ye24{
		font-size: 1.5em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
	.kasen{
			text-decoration: underline;
		}
	.under-line20{
		text-decoration:underline;
		font-size: 1.25em;
	}
	.under-line24{
		text-decoration:underline;
		font-size: 1.5em;
	}
}

@media(max-width: 480px){
	.bold-20{
		font-size: 1.1em;
		font-weight: bold;
		}
	.bold-24{
		font-size:1.25em;
		font-weight: bold;
		}
	.bold-28{
		font-size:1.35em;
		font-weight: bold;
		}
	.red-20{
		font-size: 1.1em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-24{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff0000;
	}
	.red-28{
		font-size: 1.35em;
		font-weight: bold;
		color: #ff0000;
	}
	.pink-20{
		font-size: 1.1em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-24{
		font-size: 1.25em;
		font-weight: bold;
		color: #ff9999;
	}
	.pink-28{
		font-size: 1.35em;
		font-weight: bold;
		color: #ff9999;
	}
	.note{
		font-size: 0.75em;
		line-height: 0;
	}
	.under-lb20{
		font-size: 1.1em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-lb24{
		font-size: 1.35em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#00ffff 80%);
	}
	.under-ora20{
		font-size: 1.1em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-ora24{
		font-size: 1.35em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff6600 80%);
	}
	.under-pink20{
		font-size: 1.1em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-pink24{
		font-size: 1.35em;
		font-weight: bold;
		background: linear-gradient(transparent 80%,#ff9999 80%);
	}
	.under-ye20{
		font-size: 1.1em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
		.under-ye24{
		font-size: 1.35em;
		font-weight: bold;
		text-decoration: underline;
		text-decoration-thickness: 0.5em;
		text-decoration-color: rgba(255, 228, 0, 0.6);
		text-underline-offset: -0.2em;
		text-decoration-skip-ink: none;
	}
	.kasen{
			text-decoration: underline;
		}
	.under-line20{
		text-decoration:underline;
		font-size: 1.1em;
	}
	.under-line24{
		text-decoration:underline;
		font-size: 1.25em;
	}
}