@charset "utf-8";

:root {
    --primary-color: #be1515;	/*テンプレートのメインまたはアクセントカラー*/
    --primary-color: #d60067;	/*テンプレートのメインまたはアクセントカラー*/
    --primary-inverse-color: #fff;	/*上のprimary-colorの対となる色*/
    --secondary-color: #ac15be;	/*テーマカラーとは別に、サブ的に使うカラー*/
    --secondary-color: #fbb515;	/*テーマカラーとは別に、サブ的に使うカラー*/
	--space-large: 120px;		/*主にコンテンツの左側のスペース確保に使います*/
	--space-small: 20px;		/*主にコンテンツの右側のスペース確保に使います*/
	--n-green: #b2dda8;
    --n-blue: #a5cdde;
    --n-pink: #fba6d6;
    --n-pp: #e3abc6;
}
#menubar_hdr {
    background: var(--n-pp);
}
#side-btn a {
    background-color: var(--n-pink);
}
header .side2-image{
    position: absolute;
    width: 50%;
    right: 0;
    bottom: 25%;
}
	@media screen and (min-width:900px) {
		header .side2-image{
		    position: absolute;
		    width: 25%;
		    right: 0;
		    bottom: 25%;
		}
	}
/*
#side-btn a {
    text-decoration: none;
    writing-mode: inherit;
    text-orientation: upright;
    position: fixed;
    left: 100px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    width: auto;
    padding: .6rem;
    height: 100px;
}*/
#side-btn a {
	padding: .5rem 0;
}
/*list-grid1-parts, list-grid2-parts 共通
---------------------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,.list-grid2-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,.list-grid2-parts .list-parts {
    display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;padding: 0;
}
.list-grid1-parts .list-parts .text-parts{
    margin-top: 25%;
}
/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}


/*list-grid1-parts
---------------------------------------------------------------------------*/

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	#menubar {
        padding: 50px 50px 20px 150px;
    }
    #menubar nav > ul li {
	    width: 375px;
	}
	#toiawase p.oo {
		line-height:1;
	}

	}/*追加指定ここまで*/

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(4, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		.eb .left {
	        margin-bottom: 0;
	        width: 50%;
	    }
	    .eb .right {
	        width: 50%;
	    }
        .eb {
	        display: flex;
	        gap: 2rem;
	    }
	}
	
/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
    padding: 1rem 0;
    background: #fff;
    grid-template-rows: auto 1fr;
    box-shadow: 5px 5px 20px #ffb5b5;
    border-radius: 50%;
    margin: 0 auto 40px;
    text-align: center;
    width: 84%;
	aspect-ratio: 1 / 1;
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img,.list-grid1-parts .list-parts img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;
}


/*ボタン
---------------------------------------------------------------------------*/
.list-grid1-parts .btn-parts a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #eee;		/*背景色*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}
	/*画面幅1280px以上の追加指定*/
	@media screen and (min-width:1280px) {
	.list-grid1-parts .list-parts {
	    padding: 1rem 0;
	    background: #fff;
	    grid-template-rows: auto 1fr;
	    box-shadow: 5px 5px 20px #ffb5b5;
	    border-radius: 50%;
	    margin: 0 auto 40px;
	    text-align: center;
	    width: 260px;
	    aspect-ratio: 1 / 1;
	}
	}

#footer-contents {
    background: #f1ebe8;
    color: #000;
}
#footermenu {
    background: url(../images/original.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    color: #8c8583;
    background: #fff;
}
#footermenu .title {
    color: #8c8583;
}
footer {
    font-size: 0.7rem;
    background: #fff;
    color: #8c8583;
    text-align: center;
    padding: 0;
}
small {
    font-size: 80%;
}
.kazari1 {
    animation: kazari 15s linear infinite;
    width: 35vw;
    height: 35vw;
    position: absolute;
    z-index: -1;
    top: 18vh;
    left: 3vw;
    background: #d9e8f7;
    opacity: 0.5;
}
.kazari2 {
    animation: kazari 150s linear reverse infinite;
    width: 23vw;
    height: 23vw;
    position: absolute;
    z-index: -2;
    top: -1vh;
    left: 20vw;
    background: #ffe0ee;
    opacity: 0.5;
}
/*
.kazari2 {
    animation: kazari 150s linear reverse infinite;
    width: 22vw;
    height: 22vw;
    position: absolute;
    z-index: -2;
    top: -1vh;
    left: 20vw;
    background: #ffac7e url(../images/bg1.svg) center center / 100px;
    opacity: 0.5;
}*/
body.home,body.tt {
    background: url(../images/original.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}
.ebesa_bb {
    background: url(../images/ebesa_bb.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    padding: 5rem var(--space-small) 5rem var(--space-large);
    margin: auto;
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: lighten;
    padding-left: 8em;
}
.fuchidori {
  color: green;
  text-shadow: 5px 5px 0 #FFF, -5px -5px 0 #FFF, -5px 5px 0 #FFF, 5px -5px 0 #FFF, 0px 5px 0 #FFF, 0 -5px 0 #FFF, -5px 0 0 #FFF, 5px 0 0 #FFF;
}
.fuchidori2 {
  display: inline-block;
  background: linear-gradient(135deg, #fed878 0%, #fa505e 100%);
  background: -webkit-linear-gradient(-45deg, #fed878 0%, #fa505e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #FFF;
}

.insyoku_bb {
    background: url(../images/insyoku_bb.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    padding: 2rem;
    background-color: rgba(255,255,255,0.5);
    background-blend-mode: lighten;
}
th,td{
    font-weight: 500;
}
table.opp{
    width: max(55%, 400px);
    text-align: left;
    margin: 0 auto;
}
.oo {font-size: 1.5em; letter-spacing: 0.1em;}
@media screen and (min-width: 600px) {
    .side1-image img, .side2-image img {
        width: 76%;
    }
}
#menubar nav .btn1 a::before {
	content: "";position: absolute;bottom: 0px;left: 0px;width: 0;
	height: 0px;		/*下線の高さ。上の「#menubar nav a」の「bottom」の数字と合わせる。（※マイナスはつけないで）*/
	background: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	transition: 0.3s;			/*アニメーションの実行時間(秒)*/
	transform: scaleX(0);		/*幅。最初は0にして見えなくしておく。*/
	transform-origin: left top;	/*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
	display:none;
}

#menubar nav .btn1 a:hover::before{
	transform: scaleX(0);	/*hover時に線幅を100%にする*/
}

.media-grid .media-list-item.no-border .thumbnail {
    pointer-events: none;
}
iframe + article {
  height: 93vw;
  margin-top: -92vw;
}
@media screen and (min-width: 600px) {
	iframe + article {
	    height: 66vw;
	    margin-top: -66vw;
	}
}

.f3, .side2-image.f3{flex: 3;}

.ebe{
    width: 50%;
}
.yut{
    width: 80%;
}
.goza {
    position: absolute;
    transform: rotate(+22deg);
    bottom: 30%;
    right: 10%;
    width: 30%;
}
@media screen and (max-width: 600px) {
	html.f-large {
	  font-size: 15px;
	}
	main h2 {
  font-size: 1.4rem;
  }
  main h3 {
  font-size: 1.3rem;
  }
}


.syoku{
    background: orange;
    border-radius: 10px;
    font-size: 0.8em;
    padding: 0 .5em;
    color: #fff;
}
.asa{background:#25aee8;}
.yaw{background:#6be849;}
.mus{background: pink;}