/*****
BASIC STYLE
******/
html {
-webkit-text-size-adjust: 100%;
width: 100%;
font-size: 62.5%;
}
body {
width: 100%;
font-family: 'Roboto', 'Noto Sans JP', ' ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', ' メイリオ ', Meiryo, 'MS Pゴシック ', 'MS PGothic', sans-serif;
padding: 0;
margin: 0 auto;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.82;
letter-spacing: 0.1em;
background: #fff;
color: #333;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
a:hover,
a:active,
a:focus {
outline: none;
}
div, ol, ul,dl, dt, dd,
h1, h2, h3, h4, h5, h6,
header, footer, nav, section, article, aside, hgroup, menu,
form,
img, figure, picture {
display: block;
margin: 0 auto;
padding: 0;
margin-inline-start: 0;
margin-inline-end: 0;
margin-block-start: 0;
margin-block-end: 0;
border: none;
-ms-interpolation-mode: bicubic;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.24;
}
figure img {
width: 100%;
height: auto;
}
dl, ol, ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*
p {
margin: 0;
padding: 0;
margin-inline-start: 0;
margin-inline-end: 0;
margin-block-start: 0;
margin-block-end: 0;
}
*/
table {
width: 100%;
margin: 1em 0;
padding: 0;
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
border-spacing: 0;
}
*:before, *:after {
box-sizing: inherit;
}
@media screen and (min-width: 768px) {
body {
font-size: 15px;
font-size: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
body {
font-size: 16px;
font-size: 1.6rem;
}
}






/*****
COMMONS STYLE
******/
#main_wrapper {
width: 100%;
max-width: 1240px;
margin: 0 auto;
overflow: hidden;
}
#main_wrapper > article {
margin: 0 auto;
padding: 6.4vw 4.23vw;
}
article > h2.sec_in__title {
font-size: 1.68rem;
margin-bottom: 1.64em;
letter-spacing: 0.05em;
}
.sec_in__subtitle {
display: block;
font-size: 64%;
margin-bottom: 1.8em;
letter-spacing: 0.05em;
}
.tab_scroll {
margin: 0 calc(50% - 50vw);
width: 100vw;
background: rgba(255,255,255,0.86);
border-top: 1px solid rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.5);
overflow-x: auto;
}
.tab_buttons {
display: flex;
width: max-content;
align-items: center;
gap: 2px;
}
.tab_buttons li {
font-size: 1.2rem;
font-weight: 500;
padding: 0.6em 1.25em;
white-space: nowrap;
position: relative;
overflow: hidden;
z-index: 0;
cursor: pointer;
}
.tab_buttons li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4d7985;
z-index: -1;
transition: width 0.4s ease;
}
.tab_buttons li.active {
font-weight: 700;
color: #fff;
}
.tab_buttons li.active::before {
width: 100%;
}
.tabs_wrap .select__list {
display: none;
width: 100%;
}
.select__list.active {
display: block;
}
.latest_posts {
margin: 1em auto;
}
.latest_post__title {
margin-bottom: 1em;
display: flex;
align-items: center;
gap: 0.4em;
margin: 2em 0 0.6em;
letter-spacing: 0.05em;
font-size: 0.9em;
}
.latest_post__title::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
background: #4d7985;
}
.latest_post__pickup {
margin: 0 calc(50% - 50vw);
width: 100vw;
background: #fff;
border-top: 1px solid #f4f4f4;
}
.latest_post__pickup > li {
border-bottom: 1px solid #f4f4f4;
}
.latest_post__item a {
display: flex;
align-items: center;
gap: 0.64em;
padding: 0.64em;
}
.latest_post__item a img {
display: block;
width: 16.4%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
}
.latest_post__item span {
width: calc(80% - 1.6em);
line-height: 1.3333;
}
.child_cate_list {
background: rgba(255,255,255,0.9);
border: 3px solid #f4f4f4;
border-radius: 0.68em;
margin: 1em auto;
padding: 1.86em;
}
.child_cate_list::before {
content: "";
display: block;
width: 36px;
height: 40x;
aspect-ratio: 409/470;
object-position: center;
background: url('../img/icon_ana.png');
background-size: cover;
margin: 0 auto 1em;
}
.child_cate_list > li {
display: inline-block;
vertical-align: middle;
}
.child_cate_list > li::after {
content : '';
display : block;
clear : both;
height:0;
}
.child_cate_list > li.parent_category_name {
display : block;
width: 100%;
text-align: center;
}
.child_cate_list a {
display : block;
padding: 0.5em;
text-align: center;
}
.child_cate_list a::after {
content: "";
display: block;
width: 85%;
height: 2px;
border-radius: 1em;
background: #777;
margin: 0 auto;
}
.go_contact {
display: flex;
justify-content: center;
flex-direction: column;
}
.go_contact > a {
display: block;
}
@media screen and (min-width: 768px) {
article > h2.sec_in__title {
font-size: 1.72rem;
margin-bottom: 1.72em;
}
.tab_buttons li {
font-size: 1.43rem;
}
.latest_post__pickup {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.latest_post__pickup > li {
width: (100% / 3);
flex: 1;
}
.latest_post__item a {
flex-direction: column;
align-items: center;
}
.latest_post__item a img {
display: block;
width: 94%;
height: auto;
aspect-ratio: 280/160;
object-fit: cover;
object-position: center;
}
.latest_post__item span {
width: 100%;
line-height: 1.3333;
}
}
@media screen and (min-width: 1024px) {
article > h2.sec_in__title {
font-size: 1.16em;
margin-bottom: 1.16em;
}
.tab_buttons li {
font-size: 1.1em;
}
.latest_post__pickup {
margin: 0 auto;
width: 100%;
}
}






/****/
.category_section {
background: rgba(255,255,255,0.9);
padding: 1.24em 0;
}
.category_section .latest_post__pickup {
margin: 0;
width: 100%;
}
.category_section .latest_post__title {
margin: auto 1.24em 1em;
}
.category_section .child_cate_list {
margin: auto 1.24em;
}
.parent_name {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4em;
margin-bottom: 1.24em;
letter-spacing: 0.05em;
font-size: 1.48rem;
}
.parent_name::before,
.parent_name::after {
content: "";
display: block;
width: 0.62em;
height: 0.62em;
border-radius: 50%;
background: #4d7985;
}



.flex_postlist {
display: inline-flex;
flex-wrap: wrap;
gap: 0.82em;
justify-content: flex-start;
}
.flex_postlist > li {
width: calc((100% - 1.64em) / 3);
text-align: center;
position: relative;
}
.flex_postlist figure {
overflow: hidden;
}
.flex_postlist img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
}
.flex_postlist h3 {
display: inline-block;
font-size: 0.92em;
letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
.flex_postlist > li {
width: calc((100% - 3em) / 4);
}
}
@media screen and (min-width: 1024px) {
.flex_postlist > li {
width: calc((100% - 6em) / 7);
}
}

#levelbooks {
text-align: center;
}


.layout_image {
max-width: 24%;
}



#main ul,
#secondary ul {
list-style: none;
}
#main section.box_wrappin {
border: 1px solid #777;
border-radius: 0.5em;
padding: 1.4em;
}

/*
#rss_content h3.rss_title {
display: flex;
align-items: center;
gap: 0.4em;
margin: 2em 0 0.6em;
letter-spacing: 0.05em;
font-size: 0.9em;
}
#rss_content .rss_widget h3.rss_title::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
}
.rss_widget.at_a h3.rss_title::before {
background: #4d7985;
}
.rss_widget.at_b h3.rss_title::before {
background: #48948f;
}
.rss_widget.at_c h3.rss_title::before {
background: #dd898a;
}
.rss_widget.at_d h3.rss_title::before {
background: #cc8aad;
}

.rss_itemlist__item {
border-bottom: 1px solid #777;
}
.rss_itemlist__item a {
display: flex;
align-items: center;
gap: 1.6em;
padding: 0.3333em 0;
}
.rss_itemlist__item figure {
display: block;
width: 20%;
overflow: hidden;
}
.rss_itemlist__item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
}
.rss_itemlist__item div {
width: calc(80% - 1.6em);
line-height: 1.3333;
}
.rss_itemlist__item div .rss_date {
display: block;
font-size: 0.9em;
font-weight: bold;
}
.rss_itemlist__item div .rss_date::after {
content: 'UP';
padding-left: 0.3em;
}
@media screen and (min-width: 768px) {
.rss_itemlist {
display: flex;
flex-wrap: wrap;
gap: 1.4em;
}
.rss_itemlist > li {
width: calc((100% / 2) - 1.4em);
border-bottom: none;
}
.rss_itemlist__item a {
flex-direction: column;
gap: 1em;
}
.rss_itemlist__item figure {
width: 78.5%;
}
.rss_itemlist__item div {
width: 100%;
}
}
@media screen and (min-width: 1024px) {
.rss_itemlist > li {
width: calc((100% / 3) - 1.4em);
}
}
@media screen and (min-width: 1240px) {
.rss_itemlist > li {
width: calc((100% / 4) - 1.4em);
}
}
*/








/**/
#j_terrace {
background: #afeeee;
}
#i_terrace {
background: #becc7a;
}
#miraiku {
background: #fffacd;
}

/**/
#univ_data {
margin-top: 0 !important;
overflow-x: hidden;
}

/**/
.rank_cate__name {
margin: 2em 0 0.64em;	
}








/** SIDEBER **/
.ad_ggl {
margin: 1.4em 0;
}
.ad_ggl > a,
.ad_ggl ul figure {
border: 1px solid #777;
height: 250px;
display: flex;
align-items: center;
}
.ad_ggl ul figure {
max-height: 180px;
}