@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* 
 default Style [
----------------------------------------------------------- */
html {
	height:100%;
	margin-bottom:1px;
	text-align: center;
	overflow-y:scroll;
}

body,
#layout,
#layout div,
#layout dl,
#layout dt,
#layout dd,
#layout ul,
#layout ol,
#layout li,
#layout h1,
#layout h2,
#layout h3,
#layout h4,
#layout h5,
#layout h6,
#layout pre,
#layout form,
#layout fieldset,
#layout p,
#layout blockquote,
#layout th,
#layout td,
#layout figure {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
    font-size: 16px;
}

#layout h1,
#layout h2,
#layout h3,
#layout h4,
#layout h5,
#layout h6 {
	font-weight:normal;
    transform: rotate(.03deg);
}

#layout p {
	margin: 0;
	color: #1F1F1F;
}

#layout ol,
#layout ul {
	list-style:none;
}

#layout ol li,
#layout ul li {
	list-style: none;
	text-align: left;
}

#layout img { 
	border:0;
	vertical-align: top;
}

#layout table {
	border-collapse:collapse;
	border-spacing:0;
}

#layout caption,th {
	text-align:left;
}

#layout address,#layout caption,#layout cite,#layout code,#layout dfn,#layout em,#layout strong,#layout th,#layout var {
	font-style:normal;
}

#layout a {
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

#layout .red {
	color: #F00;
	font-weight: normal;
}
	
#layout form {
	margin: 0px;
	padding: 0px;
}
    
#layout input[type="submit"]{
    -webkit-appearance: none;
}
	
/**** Clearfix ****/
#layout nav .panel:after, 
#layout nav#mainNav:after, 
#layout .newsTitle:after, 
#layout .bg:after,.post:after, 
#layout ul.post li:after,
#layout nav#mainNav .inner:after{
    content:""; display: table;clear: both;
}

#layout nav .panel,
#layout nav#mainNav,
#layout .newsTitle,
#layout .bg, .post, 
#layout ul.post li,
#layout nav#mainNav .inner{
    zoom: 1;
}

/*
 Base Link Color [
----------------------------------------------------------- */
#layout a {
	color: #000000;
    text-decoration-skip-ink: none;
}

#layout a:hover {
    text-decoration: none;
    color: #999999;
}

#layout a img,
#layout a {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

#layout a img {
    -webkit-backface-visibility: hidden; /* 追加 */
    backface-visibility: hidden; /* 追加 */
}


#layout a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}


/* iOSでのデフォルトスタイルをリセット */
#layout input[type="submit"],
#layout input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
#layout input[type="submit"]::-webkit-search-decoration,
#layout input[type="button"]::-webkit-search-decoration {
    display: none;
}
#layout input[type="submit"]::focus,
#layout input[type="button"]::focus {
    outline-offset: -2px;
}

/*アニメーション要素のスタイル*/
#layout .animation{
	opacity : 0;
	visibility: hidden;
	transition: 1.3s;
	transform: translateY(100px);
}
/*アニメーション要素までスクロールした時のスタイル*/
#layout .active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_

パソコン向けスタイルおよび共通スタイルの指定

/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
    min-width: 100%;
    background-color: #FFFFFF;
    font-family:'Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}

#layout .spImg {
    display: none;
}


/*==========================================
Other
===========================================*/
#layout img {
	width: 100%;
	max-width: 100%;
	height: auto;
	width /***/: auto;
 	text-align: center;
}
	
#layout {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 16.66vw);
    margin-left: auto;
}

#layout #rightBlock {
    width: 100%;
    display: flex;
    justify-content: space-between;
	flex-direction: row-reverse;
}

#layout #mainBlock,
#layout #yamembersBlock {
    max-width: 50%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#mainBlock {
	background-image: url(./assets/images/newtop/bg1.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-top: 92px;
	padding-bottom: 80px;
}

#layout #mainBlock_inner,
#layout #yamembersBlock_inner {
    max-width: 600px;
    width: calc(100% - 2em);
    margin-left: auto;
    margin-right: auto;
}

#layout #mainBlock h1 {
	max-width: 448px;
	width: 100%;
	margin-bottom: 80px;
}

#layout #mainBlock ul {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

#layout #mainBlock ul li {
	max-width: 48%;
	width: 100%;
}

#layout #mainBlock p {
	color: #101010;
	font-size: 0.688em;
	background-color: hsla(0,0%,100%,0.56);
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-align: center;
}

#layout #yamembersBlock {
	background-image: url(./assets/images/newtop/bg2.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 92px;
	padding-bottom: 80px;
}

#layout #yamembersBlock h2 {
	max-width: 489px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 110px;
}

#layout #yamembersBlock aside {
	max-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#layout #yamembersBlock ul {
	margin-top: 195px;
	display: flex;
	justify-content: space-between;
}

#layout #yamembersBlock ul li {
	width: 48%;
}

#layout #yamembersBlock ul li:first-child a {
	background-color: #00B900;
	border-radius: 10px;
	display: block;
	height: 60px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(./assets/images/newtop/yajirusi.png);
	background-repeat: no-repeat;
	background-position: right 17px center;
}

#layout #yamembersBlock ul li:first-child a:hover {
	background-color: #095709;
    opacity: 1;
}


#layout #yamembersBlock ul li:first-child a span {
	display: flex;
	align-items: center;
	margin-left: -39px;
}

#layout #yamembersBlock ul li:first-child a span img {
	width: 25px;
	height: auto;
	margin-right: 14px;
}


#layout #yamembersBlock ul li:last-child a {
	background-color: #F97D00;
	border-radius: 10px;
	display: block;
	height: 60px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(./assets/images/newtop/yajirusi.png);
	background-repeat: no-repeat;
	background-position: right 17px center;
}

#layout #yamembersBlock ul li:last-child a:hover {
	background-color: #C14800;
    opacity: 1;
}

#layout .spbr {
	display: none;
}

/* PC向けおよび大型タブレット向けのレイアウトの指定：1px～1200px */
@media only screen and (min-width:1px) and (max-width:1200px){
    /*==========================================
    body
    ===========================================*/
    body {
        min-width: 100%;
        width: 100%;
    }

    /*==========================================
    Other
    ===========================================*/
    #layout #rightBlock {
    display: block;
    }

    #layout #mainBlock,
    #layout #yamembersBlock {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
}

@media only screen and (max-width:940px){
    #layout {
        display: block;
        width: 100%;
        margin-top: 62px;
    }

    #layout #leftBlock {
        display: none;
    }

    #layout #rightBlock {
        width: 100%;
    }
}

@media only screen and (max-width: 470px){
    /*==========================================
    幅470px以下から ヘッダー等微調節
    ===========================================*/
    #layout #mainBlock p {
        font-size: 0.5em;
    }

    #layout #yamembersBlock ul {
        display: block;
    }

    #layout #yamembersBlock ul li {
        width: 100%;
        margin-bottom: 10px;
    }

    #layout #yamembersBlock_inner {
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        background-image: url(./assets/images/newtop/bg2.png);
        background-position: center 10px;
        background-size: contain;
        background-repeat: no-repeat;
        padding-left: 1em;
        padding-right: 1em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #layout #yamembersBlock {
        background-image: url(./assets/images/newtop/bg3.png);
        background-repeat: repeat-y;
        background-position: center center;
        background-size: contain;
    }

    #layout #yamembersBlock {
        padding-top: 45px;
        padding-bottom: 35px;
    }

    #layout #yamembersBlock h2 {
        max-width: 349px;
        width: 100%;
        margin-bottom: 60px;
    }

    #layout #yamembersBlock ul {
        margin-top: 80px;
    }

    #layout .spbr {
        display: inherit;
    }

    #layout #mainBlock {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    #layout #mainBlock h1 {
        max-width: 376px;
        width: 100%;
        margin-bottom: 34px;
    }

    #layout .spImg {
        display: inherit;
    }

    #layout .pcImg {
        display: none;
    }

}