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

body {
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
	
	text-size-adjust: 100%;
 　　-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
 　　-ms-text-size-adjust: 100%;/*EgdeMobile*/
 　　-moz-text-size-adjust: 100%;/*firefox*/
}

p{
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	max-width:80%;
	margin-left:auto;
	margin-right:auto;
	font-size:16px;
	color:#333;
	line-height:30px;
}


/* headerPC*/
header {
  background-image:url(../img/aroma-top-p.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
 background-position: left;
  background-position: top;
	min-height: 360px;
	
}


.title1 {
 font-size: 1px;
 color: transparent;

}

.title2 {
  font-size: 1px;
  color: transparent;

}

h1 {
	font-size: 1px;
 	color: transparent;
	}


/* headerTB------------------------------------------------------*/
@media (max-width: 768px){
header {
  background-image:url("../img/aroma-top-t.jpg");
  background-repeat: no-repeat;  
		max-height:360px;
	background-size: 100%;
}
  }

/* headerタブレットここまで------------------------------------------------------*/
/* headerTS------------------------------------------------------*/
@media (max-width: 490px){
header {
  background-image:url("../img/aroma-top-s.jpg");
  background-repeat: no-repeat;  
		max-height: 480px;
}
  }

/* headerスマホここまで------------------------------------------------------*/
/* h2PC*/	
	
h2	{
	line-height: 0px; /*  すきまなし　*/
	text-align: center;
	color:#D63870;
	font-size:20px;
	padding-bottom:10px;

	}

/* h2スマホ*/

@media (max-width: 490px){
h2	{
	line-height: 0px; /*  すきまなし　*/
	text-align: center;
	color:#D63870;
	font-size:18px;
	padding-bottom:10px;
}
  }


/* サブヘッダー*/
.top-header-box{
	padding-left: 30px;
	padding-right: 30px;
}
.top-header-text{
	text-align: center;
	font-size: 19px;
	font:normal;
	font-family: "Osaka-mono", "MS Gothic", "monospace";
	line-height: 1.5;
}


@media (max-width: 950px){
.top-header-text{
	text-align: left;
	font-size: 18px;
	font-family: "Osaka-mono", "MS Gothic", "monospace";
	line-height: 1.2;
}

  }

@media (max-width: 768px){
.top-header-text{
	text-align: left;
	font-size: 16px;
	font-family: "Osaka-mono", "MS Gothic", "monospace";
	line-height: 1.2;
}

  }
	
	/* topヘッダー*/
.sub-header{
	clear:both;
}
	
	
.sub-header p{
	text-align: center;
	font-size:18px;
}

/* topヘッダー スマホ*/

@media (max-width: 490px){
.sub-header p{
	text-align: center;
	font-size:17px;
}
  }

/*header紹介*/

.sub-header-text{
padding: 1em 1em;
    margin: 2em 2em;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
	
}
.writing1{
	color:#D63870;
}

/*    */
.story0{
	width: 100%;
	clear: both;
}
.story0-2{
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	min-width:300px; 
	padding-left: -10px;

}

.story0-3{
	font-size: 18px;
	font-weight: bold;
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	min-width:300px; 
}
	/*    */
	
.storyTOP{
	margin-left:20px;
	margin-right:20px;
	}
/* h2PC*/		
h3{
	text-align: center;
	font-size:19px;
	font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	color:#FFF;
	letter-spacing : 3px;
	background-color:#db7093;	
	padding-top:10px;
	padding-bottom:10px;
	}

/* h2スマホ*/	
@media (max-width: 768px){
h3{
	text-align: center;
	font-size:18px;
	font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	color:#FFF;
	letter-spacing : 3px;
	background-color:#db7093;	
	padding-top:10px;
	padding-bottom:10px;
	padding-left: 20px;
	padding-right: 20px;
	}
	  }
	
	
h4{
	background-color:#ffe4e1;
	font-size:19px;
	font-family:"メイリオ", Meiryo, Osaka, sans-serif;
	color:#4C4C4C;
	letter-spacing : 3px;	
	padding-top:10px;
	padding-bottom:10px;
	max-width:80%;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 10px;

	}	
/* 文字協調：マーカー */
.line1{
	 background-image: linear-gradient(transparent 60%, #bcfa89 60%);
	}
/* 文字協調：波線 */
.line2{
    background-image: repeating-linear-gradient(-45deg,
        #21ff00 0, #21ff00 3px,
        transparent 1px, transparent 6px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 30%;
	padding-bottom:-10px;
}
/* 文字協調：画像 */
.line3 {
    background-image: url("maker_image.svg");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    padding-bottom: 0.5em;
}



	

/* リスト */
.list-area{
	 max-width:80%;
	margin-left:auto;
	margin-right:auto;
}
.list-tit {
  background: #ebf4f8;
  display: inline-block;
  font-weight: bold;
  font-size: .9em;
  margin: 0 0 0 1.2em;
  padding: .5em;
}
.tit-bor {
  background: linear-gradient(90deg, #99bdde 0%, #99bdde 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 20%;
}
.list-box {
  background: #ebf4f8;
  border-radius: 10px;
  padding: .5em 0;
}
.list-design {
  list-style-type: disc;
}
.list-design li {
  margin-top: 10px;
}
.list-design li:first-of-type {
  margin-top: 0;
}
.list-design li::marker {
  color: #99bdde;
}

/* Let's try */
.table-try{
	max-width:80%;
	margin-left:auto;
	margin-right:auto;
}

.try{
  font-family: 'Sacramento', cursive;
  font-size:22px;
  width:150px;
}
/* Let's try:★アニメーション */

.star {
	animation: flashing 5s infinite;
	display:flex;
	margin-left:-20px;
}
@keyframes flashing {
	0% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* img01中川さん-------------------------------------------- */
/* img01中川さんPC */

.img01{
	clear: both;
    max-width:75%;
	    margin-left: auto;
	margin-right: auto;
	}
.img01-R{
	float: left;
	max-width: 50%;
	padding-left: 10px;
	padding-right: 10px;
}
	


.img01-L{
	float: left;
	max-width: 50%;
padding-left: 10px;
	padding-right: 10px;
	
}

/* img03中川さんスマホ */

@media (max-width: 850px){
	.img01{
		  max-width:60%;
	clear: both;
		
	}
	.img01-R{
		clear: both;
	background: #F1BABB;
	padding-left: 0px;
	padding-right: 10px;
}
	
			.img01-L{
				clear: both;
	background:#B51518;
	padding-left: 0px;
	padding-right: 10px;
	
}
}
@media (max-width: 650px){
	.img01{
		  max-width:80%;
	clear: both;
		
	}
	.img01-R{
		clear: both;
	background: #F1BABB;
	padding-left: 0px;
	padding-right: 10px;
}
	
			.img01-L{
				clear: both;
	background:#B51518;
	padding-left: 0px;
	padding-right: 10px;
	
}
}

@media (max-width: 450px){
	.img01{
		  max-width:100%;
	clear: both;
		
	}
	.img01-R{
		clear: both;
	background: #F1BABB;
	padding-left: 0px;
	padding-right: 10px;
}
	
			.img01-L{
				clear: both;
	background:#B51518;
	padding-left: 0px;
	padding-right: 10px;
	
}
}

/* img01中川さん-------------------------------------------- */






.story2-text{
	clear:both;
}




/*  グラフ説明　*/

.Annotation {
	float:5px;
	min-width:300px;

	}

.Annotation-text1{
    max-width:80%;
	font-size:14px;
}
.Annotation-text2{
   max-width:80%;
}
.breast-cancer-graph{
    max-width:90%;
	margin-left:auto;
	margin-right:auto;
 }


@media (max-width: 450px) {
.Annotation-text2{
   max-width:100%;
}
.graph-img{	
	float: left;
	max-width: 100%;
	 min-width:300px;
	padding-left: -30px;
	
}

.graph-text{
       float:left;
	   justify-content: center;
	   min-width:90%;
	   padding-left: 10px;
}

 }

/* グラフ */

.breast-cancer-graph{
    max-width:90%;
	margin-left:auto;
	margin-right:auto;
 }
 
.graph-img{	
	float: left;
	max-width: 44%;
	 min-width:320px;
	
}

.graph-text{
	
       float:left;
	   justify-content: center;
	max-width: 44%;
}


.story2-text2{
	clear:both;
}















/* story3 */

.story3 {
	clear:both;
}
/* 中川さん経過写真 */
.breast-cancer-img{
    max-width:50%;
	margin-left:auto;
	margin-right:auto;
}

/* story4 */

.story4{
	clear: both;
}
.breast-cancer-cause{
	background-color:#fdf5e6;
	max-width:80%;
	margin-left:auto;
	margin-right:auto;
	font-size:14px;
	color:#666;
	line-height:30px;
	padding:20px;
	
}

/* story4 */
.cp_hr01 {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color:#FFF;
}

/* story4 */
.mybox{
	background-color: 
#F6D4D8;  /* 背景色 */
	border-radius: 5px;
	margin: 20px 5px; /* 外側の余白 上下・左右 */
	padding: 30px 20px 20px 20px; /* 内側の余白 上・右・下・左 */
	position: relative;
	z-index: 0;
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
.mybox:before{
	border: 1px solid 
#fff; /* 白い実線 */
	border-radius: 5px;
	content: '';
	display: block;
	margin: 4px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: -1;
}
.mybox:after{
	background-color: 
rgba(249,223,213,0.9);  /* マステ背景色 */
	background-image: radial-gradient(
#fff 20%, 
transparent 0), radial-gradient(
#fff 20%, 
transparent 0); /* 水玉の色 */
	background-position: 0 0, 8px 8px;  /* 水玉の距離 */
	background-size: 15px 15px; /* 水玉の大きさ */
	border-left: 2px dotted 
rgba(0,0,0,0.1);
	border-right: 2px dotted 
rgba(0,0,0,0.1);
	box-shadow: 0 0 5px 
rgba(0,0,0,0.2);
	content: 'エストロゲンとは？';
	display: block;
	padding: 5px 20px;  
	text-align: center;
	position: absolute;
	top: -10px;
	left: 20px;
	transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
}



/*　story5:経過　*/

.breast-cancer-img{
max-width:initial;
}

.breast-cancer-img li{
	max-width:50%;
	margin-left:auto;
	margin-right:auto;	
}
.Medical-aroma-img2{
max-width:100%;
}

/* story5:医療現場写真 */
.Medical-aroma-img{
		max-width:50%;
	margin-left:auto;
	margin-right:auto;
}

/* story5:講座 */
.Medical-aroma-img{
	max-width:50%;
	margin-left:auto;
	margin-right:auto;
	padding-left:20%;
}


/* story6:講座 */
.story6-text{
	max-width:500px;
	float: left;
	padding-left:5%;
	
}
/* story6:講座画像PC */

.story6-img{
max-width:initial;	
}

.Medical-aroma-img3{
	max-width:40%;
	margin-left:auto;
	margin-right:auto;
}

@media (max-width: 768px){
	
}
/* story6:講座画像タブレット */
 
@media (max-width: 768px){
.story6-img{
max-width:initial;	
}

.Medical-aroma-img3{
	max-width:80%;
	margin-left: 35px;
	
}
  }
/* story7:movie*/
.video{
 position: relative;
 max-width: 50%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
 aspect-ratio: 16 / 9;
	margin-left:auto;
	margin-right:auto;	
	min-width: 300px;
	}

.video iframe{
  position: absolute;
  width: 100%;
  height: 100%;

}
.story7{
	clear: both;
	padding-top: 30px;
	padding-bottom: 30px;

}



/* story8*/
.story8{
	background-image:url(../img/aromaimg01.jpg);
	Background-repeat:no-repeat;
	background-size: contain;
	width: 100%;
	min-height:250px;
	
}

@media (max-width: 768px){
  .story8{
   background-image:url("../img/aromaimg02.jpg");
   background-size: cover;
   background-position: center;
   min-height:80vh;
  }
}
@media (max-width: 450px){
  .story8{
   background-image:url("../img/aromaimg03.jpg");
   background-size: cover;
   background-position: center;
   min-height:80vh;
  }
	
	.story8-text{
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-top:0px;
	padding-bottom:40px;
}
}

.story8-text{
	max-width:60%;
	margin-left:auto;
	margin-right:auto;
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom: 20px;


}

/* プレゼント */

.present-area{
	margin-top:20px;
	text-align:center;

}

.present-Content {
	  position: relative;
    display: inline-block;
     padding: 0 5rem;
    border-top: 3px solid;
    border-bottom: 3px solid;
    background-color:#E6AEDC;
    color:#452361;
    font-size: 15px;
    text-align: center;
	font-weight: bold;
	margin-top:5px;
	margin-bottom:5px;
}

.present-Content::before,
.present-Content::after {
    position: absolute;
    content: '';
    top: 0;
    width: 0px;
    height: 0px;
    border-color: transparent #fff;
    border-style: solid;
}

.present-Content::before {
    left: 0;
    border-width: 35px 0px 35px 10px;
}

.present-Content::after {
    right: 0;
    border-width: 35px 10px 35px 0px;
}

/*   ---------------*/
@media (max-width: 768px){

	.present-Content {
	  position: relative;
    display: inline-block;
     padding: 0 30px;
    border-top: 3px solid;
    border-bottom: 3px solid;
    background-color:#E6AEDC;
    color:#452361;
    font-size: 15px;
    text-align: center;
	font-weight: bold;
	margin-top:5px;
	margin-bottom:5px;
}

.present-Content::before,
.present-Content::after {
    position: absolute;
    content: '';
    top: 0;
    width: 0px;
    height: 0px;
    border-color: transparent #fff;
    border-style: solid;
}

.present-Content::before {
    left: 0;
    border-width: 35px 0px 35px 10px;
}

.present-Content::after {
    right: 0;
    border-width: 35px 10px 35px 0px;
}
  }
/* フッター*/


.Medical-aroma-footer{
	background-color:#630;
	height:50px;
	font-size:14px;
}

.Medical-aroma-footer-text{
	color:#FFF;
	text-align:center;
}

@media (max-width: 768px){
.Medical-aroma-footer{
	background-color:#630;
	height:120px;
	font-size:14px;
}
  }


/* リンク*/


.radius-box{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.btn-gradient-radius {
  display: inline-block;
  padding: 15px;
  border-radius: 30px;
  text-decoration: none;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
  height: 30px;
  width: 300px; 
  }
.radius-text{
font-size: 20px;
font-weight: bold;
color: #FFF;
Vertical-align: middle;
margin-left: 10px;
text-decoration:none; 	
}

.arrow-right{
    border: 0;
    border-top: solid 4px #FFFFFF;
    border-right: solid 4px #FFFFFF;
    display: inline-block;
    transform: rotate(45deg);
    width: 15px;
    height: 15px;
	margin-right: 10px;


}