@charset "UTF-8";

/*====================================
/*
/* ページ表示　fadein
/*
/*===================================*/
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

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

/*====================================
/*
/* BASE
/*
/*===================================*/
html{
height: 100%;/*-- フッターを最下部に固定するための指定 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定は rem で --*/
}

body{
font-family: "メイリオ", Meiryo , "ＭＳ Ｐゴシック", "ヒラギノ角ゴ", sans-serif;
font-size: 1.4em;
background: #FFF;
color: #233043;
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
min-height: 100vh; /*-- フッターを最下部に固定するための指定 --*/
display: flex; /*-- フッターを最下部に固定するための指定 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 --*/
}

.contents {
flex: 1; /*-- フッターを最下部に固定するための指定 --*/
}

/*====================================
/*
/* common
/*
/*===================================*/

/*======================
outer
=======================*/
.outer {
width: 100%;
}

/*======================
inner
=======================*/
.inner {
width: 90%;
margin-left: auto;
margin-right: auto;
}

/*======================
pagetop
=======================*/
.gotop {
position: fixed;
bottom: 1em; right: 1em;
}

.gotop a {
text-decoration: none;
text-align: center;
background: #D5E606;
opacity: 0.9;
border-radius: 50%;
width: 4.8em;
height: 4.8em;
display: block;
position: relative;
}

.gotop a::after {
content: "";
display: block;
opacity: 0.9;
width: 1.4em;
height: 1.4em;
border-top: solid .2em #FFF;
border-left: solid .2em #FFF;
position: absolute;
top: 40%; left: 50%;
transform: translate(-50%,0) rotate(45deg);
}

.gotop a:hover {
opacity: 0.6;
}


/*====================================
/*
/* header
/*
/*===================================*/
.header {
text-align: center;
padding: 1em 0;
}

.logo_box img {
width: 16em;
height: auto;
}

/*====================================
/*
/* footer
/*
/*===================================*/
.footer {
width: 100%;
margin: 4em 0 0;
padding: 3em 0 1em;
background: #F9FDCF;
text-align: center;
}

.copy {
font-size: 1.1rem;
margin: 6em 0 0;
}

.abt_hfc {
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 3em 3em 2em 3em;
background: #fdfdea;
border-radius: .8em;
}

.ft_logo_hfc img {
max-width: 260px;
width: 100%;
height: auto;
}

.abt_hfc .ttl {
font-size: 1.6rem;
font-size: 16px;
color: #708f02;
margin-top: 20px;
}

.abt_hfc .txt {
font-size: 1.3rem;
font-size: 13px;
text-align: left;
margin-top: 10px;
line-height: 1.6em;
}

.abt_hfc_btn {
height: 40px;
line-height: 40px;
display: inline-block;
padding: 0 12px 0 12px;
text-decoration: none;
background: #a2d000;
color: #FFF;
border-bottom: solid 4px #708f02;
border-radius: 4px;
margin-top: 20px;
}

.abt_hfc_btn:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}


/*====================================
/*
/* contents
/*
/*===================================*/
.contents {
width: 100%;
margin: 4em auto 0;
}

.contents.top {
width: 100%;
margin: 1em auto 0;
}

/*====================================
/*
/* INDEX
/*
/*===================================*/
#top_hero {
}

#top_hero img {
width: 100%;
}

#top_hero img.pc {
display: none;
}

#top_hero img.sp {
display: block;
}

.top_lead {
margin: 1em 0 0;
font-size: 12px;
line-height: 1.6em;
padding: 1em 1em .8em;
background: #F7F7F7;
}

.top_lead span {
display: none;
}

#top_article {
display: flex;
flex-direction: column;
margin: 1em 0 0;
gap: 3em 0;
text-align: center;
}

#top_article .item {
display: flex;
flex-direction: column;
position: relative;
background: #FFFFFE;
padding: 2em 2em 2em;
border: solid .2em #232323;
border-radius: 1em;
width: 100%;
box-shadow: 0 .5em 0 0 rgba(214, 214, 214, 1);
}

#top_article .item.exercise {
padding: 1.5em 2em 2em;
}

#top_article .item::before {
position: absolute;
top: 1.5em; right: 1.5em;
content: "";
display: block;
width: 1em;
height: 1em;
border: solid .2em #232323;
background: #FFF;
box-shadow: inset .3em .3em 0 0 rgba(214, 214, 214, 1);
border-radius: 50%;
}

#top_article .ttl {
font-size: 1.4rem;
line-height: 1.4em;
}

.exrcs {
font-size: 11px;
display: block;
line-height: 1.2em;
}

#top_article .img {
width: 80%;
max-width: 220px;
margin: 0 auto 0;
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
}

#top_article .img img {
width: 100%;
height: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

#top_article .btn {
margin: auto auto 0;
width: 12em;
}

/*======================
ページタイトル
=======================*/
.ttl_box {
/*padding: 1.5em 0 0;*/
position: relative;
border-bottom: solid .2em #000;
}

.ttl_box:before,
.ttl_box:after {
content: "";
display: block;
width: 8.5em;
height: 8.5em;
position: absolute;
border-radius: 50%;
position: absolute;
z-index: -1;
}

.ttl_box::before {
border: solid .05em #D5E702;
background: #D5E702;
bottom: -2.5em;
left: -3.8em;
}

.ttl_box::after {
border: solid .05em #999;
bottom: -2em;
left: -4.5em;
}

.page_ttl {
font-size: 1.8rem;
line-height: 1.2em;
position: absolute;
bottom: .3em;
left: .3em;
}

.page_ttl span {
font-size: 1.4rem;
line-height: 1em;
margin: 0 0 .2em;
display: block;
}

#outline_txt_sp {
position: relative;
}

#outline_txt_sp p {
margin: 1em 0 0;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.4em;
width: 100%;
border: 2px solid #232323;
padding: .8em;
background: #D5E606;
}

#outline_txt_sp::before {
position: absolute;
bottom: -.3em;
left: 50%;;
width: 98%;
height: 30px;
content: '';
transform: translateX(-50%);
background-image: -webkit-repeating-linear-gradient(-135deg, #232323, #232323 2px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(45deg, #232323, #232323 2px, transparent 2px, transparent 5px);
border: 2px solid #232323;
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: -1;
}

#outline_txt {
display: none;
}

/*======================
ボタン
=======================*/
.btn {
font-size: 1.4rem;
line-height: 1.4em;
font-weight: bold;
color: #232323;
position: relative;
display: inline-block;
transition: transform 0.3s;
text-align: center;
text-decoration: none;
cursor: pointer;
margin-top: 1em;
}

.btn_dtl {
margin-bottom: 0.5em;
padding: 0;
border-radius: 0.5em;
}

.btn_dtl::before {
position: absolute;
top: 0; right: 0;bottom: 0; left: 0;
width: calc(100% -.32em);
height: calc(100% -.32em);
content: "";
transition: transform 0.3s;
transform: translate3d(0, .4em, -.01em);
border: .16em solid #232323;
border-radius: inherit;
background: #ccc100;
}

.btn_dtl_front {
position: relative;
display: block;
padding: .6em 3.2em .6em 2.4em;
transition: transform 0.3s;
border: .16em solid #232323;
border-radius: inherit;
background: #FFF000;
}

.btn_dtl_front::after {
content: "";
display: inline-block;
width: .4em;
height: .4em;
border-top: .18em solid #232323;
border-left: .18em solid #232323;
transform: translate(0, -50%) rotate(135deg);
position: absolute;
top: 50%; right: 2.1em;
transition: transform 0.3s;
}

.btn_dtl:hover,
.btn_dtl:active {
transform: translate3d(0, .4em, -.01em);
background: #FFF000;
}

.btn_dtl:hover::before,
.btn_dtl:active::before {
transform: translate3d(0, 0, -.5em);
}

.btn_dtl_front:hover::after,
.btn_dtl_front:active::after {
top: 50%; right: 2em;
transform: translate(0, -50%) rotate(135deg);
}

/*======================
ヒーローイメージ
=======================*/
#hero_img {
width: 100%;
aspect-ratio: 16 / 6;
margin: 1.5em 0 0;
position: relative;
overflow: hidden;
}

#hero_img img {
width: 100%;
height: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}

#hero_img.kenshin img {
top: 65%;
}

#hero_img.stiffness img {
top: 60%;
}

#hero_img::before {
content: "";
display: block;
width: 96%;
aspect-ratio: 16 / 5.6;
border: solid 1px rgba(255,255,254,.8);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}

/*======================
リード文
=======================*/
#lead_txt {
font-size: 1.3rem;
line-height: 1.6em;
margin: 3em 0em 0 1em;
padding: 2em 3em 3em 2em;
position: relative;
background-color: #F9FDCF;
}

#lead_txt::before {
width: calc(100% - .24em);
height: calc(100% - .24em);
content: "";
position: absolute;
top: -1em;
left: -1em;
border: .12em solid #323232;
}

/*======================
監修者
=======================*/
#supervisor_box {
display: flex;
align-items: center;
flex-wrap: wrap;
background: #F2F2F2;
padding: 1em;
margin: 2em 0 0;
gap: 0 1em;
}

.profile_img img {
width: 5em;
height: 5em;
object-fit:cover;
border-radius:50%;
object-position: 50% 50%;
}

.profile_txt {
line-height: 1.2em;
}

.profile_txt .ttl {
font-size: 1.2rem;
}

.profile_txt .name {
font-size: 1.4rem;
font-weight: bold;
margin: .2em 0 0;
}

#supervisor_box .prof {
width: 100%;
font-size: 1.2rem;
line-height: 1.4em;
margin: .2em 0 0;
position: relative;
margin: 1.5em 0 0;
padding: 1.5em 0 0;
}

#supervisor_box .prof::before {
content: "";
background-image: linear-gradient(to right, #000, #F2F2F2 .2em, transparent .2em, transparent 1em);
background-size: 1em .08em;
background-repeat: repeat-x;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

/*======================
記事
=======================*/
#article {
display: flex;
flex-direction: column;
gap: 4em 0;
margin: 3em 0;
}

/*======================
記事見出し
=======================*/
.article_ttl {
position: relative;
padding: 2.6em 1em 1em;
border-radius: .8em;
background-color: #D5E702;
border: .18em solid #232323;
}

.article_ttl::before {
position: absolute;
top: 98%;
left: 3em;
height: 1.4em;
width: .18em;
transform: rotate(-45deg);
background-color: #232323;
content: '';
}

.article_ttl .ttl {
font-size: 1.6rem;
line-height: 1.4em;
font-weight: bold;
}

.article_ttl span {
width: 100.1%;
background: #232323;
color: #FFF;
font-size: 1.1rem;
padding: .3em 1em .3em 1.4em;
position: absolute;
top: .6em; left: 0;
}


/*======================
記事
=======================*/
.article_contents {
display: flex;
flex-direction: column;
margin: 2em 0 0;
gap: 1em 3em;
text-align: center;
}

.article_cap p {
font-size: 1.4rem;
line-height: 1.6em;
margin: 0 1.4em 0;
text-align: left;
}

.article_cap p br {
display: none;
}

.article_img {
width: 80%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
border: solid .18em #232323;
}

.article_img img {
width: 100%;
height: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}

/*======================
記事_健診
=======================*/
#article_kenshin {
display: flex;
flex-direction: column;
margin: 4em 0 0;
gap: 3em 0;
text-align: center;
}

#article_kenshin .item {
position: relative;
background: #FFFCE9;
padding: 4em 2em 3em;
border: solid .2em #232323;
border-radius: 1em;
width: calc( 100% - .5em );
box-shadow: .5em .5em 0 0 rgba(214, 214, 214, 1);
}

#article_kenshin .item::before {
position: absolute;
top: 1.5em; left: 1.5em;
content: "";
display: block;
width: 1em;
height: 1em;
border: solid .2em #232323;
background: #FFF;
box-shadow: inset .3em .3em 0 0 rgba(214, 214, 214, 1);
border-radius: 50%;
}

#article_kenshin .ttl {
font-size: 1.4rem;
line-height: 1.6em;
}

#article_kenshin .ttl span {
background: linear-gradient(transparent 50%, #D5E402 0%);
display: inline;
padding: 0 .1em 0;
}

#article_kenshin .img {
width: 80%;
max-width: 220px;
margin: 1.5em auto 0;
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
}

#article_kenshin .img img {
width: 100%;
height: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

#article_kenshin .btn {
margin-top: 1em;
}

@media screen and (min-width: 990px) {
/*-- min-width: 990px //--*/

/*====================================
/*
/* common: 990px
/*
/*===================================*/

/*======================
inner
=======================*/
.inner {
width: 990px;
}

/*======================
contents
=======================*/
.contents {
}


/*====================================
/*
/* header: 990px
/*
/*===================================*/
.header {
text-align: left;
}

.logo_box img {
width: 20em;
height: auto;
}



/*====================================
/*
/* footer: 990px
/*
/*===================================*/
.footer_about .txt {
font-size: 1.3rem;
}

.footer_attention {
font-size: 1.2rem;
}


/*====================================
/*
/* contents: 990px
/*
/*===================================*/
.contents {
margin: 6em auto 0;
}

.contents.top {
width: 100%;
margin: 1em auto 0;
}

/*====================================
/*
/* INDEX
/*
/*===================================*/
#top_hero img.pc {
display: block;
}

#top_hero img.sp {
display: none;
}

.top_lead {
font-size: 16px;
}

.top_lead span {
display: inline;
}

#top_article {
flex-direction: row;
flex-wrap: wrap;
margin: 4em 0 0;
gap: 3em 3em;
}

#top_article .item {
padding: 4em 2em 2em;
width: calc( 33.33% - 2em );
}

#top_article .item.popular {
padding: 2em 2em 2em;
}

#top_article .item:last-child {
width: 100%;
}

#top_article .item::before {
box-shadow: inset .3em .3em 0 0 rgba(214, 214, 214, 1);
}

#top_article .ttl {
font-size: 1.8rem;
}

#top_article .img {
max-width: 280px;
margin: 0 auto 0;
position: relative;
overflow: hidden;
}

/*======================
ページタイトル
=======================*/
.ttl_box:before,
.ttl_box:after {
width: 8.5em;
height: 8.5em;
}

.ttl_box::before {
bottom: -3em;
left: -3em;
}

.ttl_box::after {
bottom: -2.5em;
left: -4em;
}

.page_ttl {
font-size: 2.8rem;
}

#outline_txt_sp {
display: none;
}

#outline_txt {
display: block;
position: absolute;
bottom: 3em; right: 0;
}

#outline_txt p {
position: relative;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.4em;
width: 100%;
max-width: 360px;
border: 2px solid #232323;
padding: 1em 1em 1.2em 1.4em;
background: #D5E606;
}

#outline_txt::before {
position: absolute;
bottom: -.3em;
left: 50%;;
width: 98%;
height: 10px;
content: '';
transform: translateX(-50%);
background-image: -webkit-repeating-linear-gradient(-135deg, #232323, #232323 2px, transparent 2px, transparent 5px);
background-image: repeating-linear-gradient(45deg, #232323, #232323 2px, transparent 2px, transparent 5px);
border: 2px solid #232323;
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}


#outline_txt::after {
content: "";
display: block;
width: 2px;
height: 2em;
background: #232323;
position: absolute;
transform: rotate(35deg);
bottom: -1.2em; left: 1em;
}


/*======================
リード文
=======================*/
#lead_txt {
font-size: 1.6rem;
}

/*======================
監修者
=======================*/
#supervisor_box {
padding: 1.5em;
}

.profile_txt .ttl {
font-size: 1.4rem;
}

.profile_txt .name {
font-size: 1.6rem;
}

/*======================
記事
=======================*/
#article {
gap: 6em 0;
}

/*======================
記事見出し
=======================*/
.article_ttl .ttl {
font-size: 2.0rem;
}

.article_ttl span {
font-size: 1.2rem;
width: auto;
}

/*======================
記事
=======================*/
.article_contents {
flex-direction: row;
gap: 0 3em;
}

.article_cap {
display: flex;
flex-direction: column;
align-items:start;
}

.article_cap p {
font-size: 1.4rem;
margin: .2em 0 0;
}

.article_cap p br {
display: block;
}

.article_img {
width: 300px;
max-width: 300px;
min-width: 300px;
margin: 0 auto;
}

/*======================
ボタン
=======================*/
.btn {
margin-top: auto;
}

/*======================
記事_健診
=======================*/
#article_kenshin {
flex-direction: row;
flex-wrap: wrap;
margin: 4em 0 0;
gap: 3em 3em;
}

#article_kenshin .item {
width: calc( 50% - 1.75em );
}

#article_kenshin .item::before {
box-shadow: inset .3em .3em 0 0 rgba(214, 214, 214, 1);
}

#article_kenshin .ttl {
font-size: 1.8rem;
}

#article_kenshin .img {
max-width: 280px;
margin: 1.5em auto 0;
position: relative;
overflow: hidden;
}


/*--// min-width: 990px --*/
}