@charset "UTF-8";
/* CSS Document */



/*リセット*/
*{
margin: 0;
padding: 0;
}


body {
	background-color: #000000;
	color: #fff;
    font-family: 'Noto Serif JP', serif;
	
}

img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
}



figure {
    display: block;          /* 余計な余白が出ないようにする */
	text-align: center;
}

figcaption{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 0.7em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
}


figure img {
	height: 280px;
	width: auto;
	padding: 0px 5px 0px 5px
		
}



a img {
	width: auto;
}

.wh-background {
	background-color: #FFFFFF;
}



.imagearea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  
}	



.page-header {
	background: #A7006C;
	position: fixed;  /*画面の上部にヘッダーを固定*/ 
    top: 0;
    left: 0;
    right: 0;
}


.top-tag{
	width: 100%;
	background: #4B46AA;
	margin: 0 auto;
	padding: 10px 0;
}


.top-tag2{
	width: 100%;
	background: #A7006C;
	margin: 0 auto;
	padding: 10px 0;
}



.wh-back{
	width: 100%;
	margin: 0 auto;
	padding: 5px 0px;
}


.wh-back2{
	width: 60%;
	margin: 0 auto;
	padding: 5px 0px;
}

.bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.3rem;
	width: 90%;
	padding: 8px;
	margin: 0 auto;
}

.logo {
	width: 250px;
	padding: 5px 0

}

h1 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.3rem;
	font-weight: 500;
	text-align: center;	
}





.item {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	text-align: center;
}


.title-s {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;	
}


.title-m {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
}

.title-l {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
	margin-top: 20px;
}

.title-bk {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: #000000;
	text-align: center;
	margin: 30px 0 15px
}

.wrapper {
	margin: 0 auto;
	padding: 0 4%;
}

.wrapper-top {
	display:flex;
	flex-direction: column;
	align-items: center;
	width:100%;
	max-width: 800px;
	margin: 0px auto;
}

.wrapper-main {
	display:flex;
	flex-direction: column;
	align-items: center;
	width:100%;
	max-width: 650px;
	margin: 0px auto;
}

.wrapper-main_2 {
	display:flex;
	flex-direction: column;
	align-items: center;
	width:100%;
	max-width: 650px;
	margin: 0px auto 50px;
}


.wrapper-main_2 img {
	margin: auto;
    display: block;
}

.wrapper-sub {
	display: flex;
	justify-content: center;
	width: 650px;
	margin: 0 auto;
}



.wrapper-sub img {
	width:  10rem;
	height: auto;
}




.bunner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 70px;
}


.body-text {
  font-size: 1.5rem;	
  text-align: justify;
  margin: auto;
  width: 580px;	
  margin-top: 20px;
}


.body-text-bk {
  font-size: 1.5rem;	
  text-align: justify;
  color: #000000;	
  margin: auto;
  width: 90%;	
}


.sub-text {
	font-size: 1.5rem;
	text-align: justify;
	padding: 20px;
}


.title-recipe {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2rem;
	font-weight: 600;
	color: #A7006C;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
}

.text-recipe {
	color: #000000;
    font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.3rem;
	text-align: justify
}


.center {
	text-align: center;
}



.box{
	display: flex;
	align-items: center;
}


table {
	background: #fff;
	max-width: 600px;
	width: 100%;
	border: 20px #fff solid;
	text-align: center;
	margin-bottom: 20px;
}

.border {
	border-bottom: 1px solid #969696;
	
}

.border2 {
	border-bottom: 3px solid #A7006C;
	
}


/* ボタンのスタイル */
.btn_sante {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 300px;
	padding: 0.6rem 4rem 0.9rem ;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: bold;
	font-size: 30px;
	border: 2px solid #BE6E00;
	background: #BE6E00;
	color: #fff;
	border-radius: 100vh;
	transition: 1.0s;
	margin: 50px;
}

a.btn_sante:hover {
	color: #BE6E00;
	background: #fff;
}

.btn_beaute {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 300px;
	padding: 0.6rem 4rem 0.9rem ;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: bold;
	font-size: 30px;
	border: 2px solid #BE3F5F;
	background: #BE3F5F;
	color: #fff;
	border-radius: 100vh;
	transition: 1.0s;
	margin: 50px;
}

a.btn_beaute:hover {
	color: #BE3F5F;
	background: #fff;
}

.btn_athlete {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 300px;
	padding: 0.6rem 4rem 0.9rem ;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: bold;
	font-size: 30px;
	border: 2px solid #649600;
	background: #649600;
	color: #fff;
	border-radius: 100vh;
	transition: 1.0s;
	margin: 50px;
}

a.btn_athlete:hover {
	color: #649600;
	background: #fff;
}






/* フッター　*/

footer {
	width: 100%;
    background-color: #A7006C;
    text-align: center;
    padding: 26px 0;
}

footer p {
    color: #fff;
    font-size: 0.875rem;
}

footer img {
	margin-left: 50px;
}


.link-f {
	width: 850px;
	display: flex;
	justify-content: space-between;
    text-align: center;
	list-style: none;
	font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
	font-size: 1.5rem;
	padding: 0 0 10px;
	margin: 0 auto;
}


.link-f li {
	margin:  0 auto;
}

.link-f a{
    font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
	font-weight: 500;
	font-size: 1rem;
}

.link-f a:hover{
	opacity: 0.7;
}

.snslogo {
	height: 20px;
	margin: 0 5px 0;
}




@media screen and  ( max-width : 834px ){
	

	
.wh-back2 {
	width: 80%;

}	
	
	
.link-f {
	width: 800px;
}
	
	
.wrapper-main_2 img {
	max-width: 90%;

}		
	
	
}



@media screen and  ( max-width : 768px ){
	

body {
	font-size: 1.2rem;
}	


	
	
.wh-back2{
	width: 90%;

}	
	
	
.bar {
    display: flex;
	flex-direction: column;
}	
	
	


.wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
	font-size: 1.3rem;
}
	

.wrapper-main {
	width: 100%;
	margin: 0px auto;
	max-width: 410px;
	padding: 0px;
}	
	
	
	
	
h1 {
	font-size: 1.7rem;
	font-weight: 500;
	text-align: center;	
}

	
.item {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;	
}


.title-s {
	font-size: 1rem;
	font-weight: 500;
	text-align: center;	
}


.title-m {
	font-size: 1.3rem;
	font-weight: 500;
	text-align: center;
}

.title-l {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin-top: 20px;
}

.title-bk {
	font-size: 1.7rem;
	font-weight: 700;
	color: #000000;
	text-align: center;
	margin: 30px 0 15px
}
	
figure img {
	width: 350px;
	height: auto;

}
	
	
figcaption{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
	margin-bottom: 30px;
}	
	

	
.wrapper-sub {

	width: 90%;
}	
	


.wrapper-top {
	max-width: 100%;	
	}
	

	


	
	
.imagearea {
  display: flex;
  flex-direction: column;
  justify-content: center;
}	
	
.imagearea img {
	width:80%;
	}	
	
.body-text {
  font-size: 1.2rem;	
  width: 90%;	
  margin-top: 20px;	
}

	
	
	
.title-recipe {
	font-size: 1.4rem;
}

.text-recipe {
	font-size: 1rem;
}	
	

.body-text-bk {
  font-size: 1.2rem;
  width: 90%;	
}
	

	
.sub-text {
   font-size: 1.2rem;
   text-align: justify;
   padding: 10px;
	
}
	
	
	
/* ボタンのスタイル */
.btn_sante {
	width: 200px;
	font-size: 21px;
}

.btn_beaute {
	width: 200px;
	font-size: 21px;
}

.btn_athlete {
	width: 200px;
	font-size: 21px;
}
	
.link-f {
	width: 320px;
	display: flex;
	flex-direction: column;
}
	
	
.link-f img {
	width: 90%;	
	}	
	
	
footer img {
	margin-left: 0;
}	
	
	.space {
		margin-top: 3rem
	}	
	
	
 }



@media screen and (max-width: 428px) {
	
.wrapper-sub {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 350px;
	text-align: center;
	margin:0 auto;
	align-items: center;

}	

	

	
.btn_beaute {
	margin: 20px 0 0;

		
	}	
	
.btn_athlete {
	margin: 20px 0 0;
		
	}	
	
	
	
.btn_sante {
	margin: 20px 0 20px;

	}
		
	
.sub-text {
	padding: 10 0 10px;
}
	
	
}



@media screen and (max-width: 390px) {
	

.bar {
	padding: 4px;
}
	
.wh-back2{
	width: 100%;

}		
	
	
.wrapper-main {
	margin: 0px auto;
	max-width: 100%;
	padding: 0px;
}	
	
	
.wrapper-sub {
	width: 300px;
}	


	
	
.title-l {
	font-size: 1.4rem;
}	
	
.title-bk {
	font-size: 1.5rem;
}	
	
	
.body-text {
  font-size: 1.1rem;	
}		


.body-text-bk {
  font-size: 1.1rem;
}	
	
	
.sub-text {
   font-size: 1rem;
	
}	
	
}
	
@media screen and (max-width: 330px) {	
	
	
	
h1 {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;	
}


	
.item {
	font-size: 1.3rem;
	font-weight: 500;
	text-align: center;	
}
	

	
.title-l {
	font-size: 1.2rem;
}	
		
.title-s {
	font-size: 0.8rem;

}	
	
.title-bk {
	font-size: 1.2rem;
}		
	
.body-text {
  font-size: 1rem;	
}		
	
.body-text-bk {
  font-size: 1rem;
}
		
	
	
	
/* ボタンのスタイル */
.btn_sante {
	width: 170px;
	font-size: 18px;
}

.btn_beaute {
	width: 170px;
	font-size: 18px;
}

.btn_athlete {
	width: 170px;
	font-size: 18px;
}	
}