@charset "utf-8";
/* reset style */
main {
  /* default Link style */ }
  main html, main body, main div, main span, main object, main iframe,
  main h1, main h2, main h3, main h4, main h5, main h6, main p, main blockquote, main pre,
  main abbr, main address, main cite, main code,
  main del, main dfn, main em, main img, main ins, main kbd, main q, main samp,
  main small, main strong, main sub, main sup, main var,
  main b, main i,
  main dl, main dt, main dd, main ol, main ul, main li,
  main fieldset, main form, main label, main legend,
  main table, main caption, main tbody, main tfoot, main thead, main tr, main th, main td,
  main article, main aside, main canvas, main details, main figcaption, main figure,
  main footer, main header, main hgroup, main menu, main nav, main section, main summary,
  main time, main mark, main audio, main video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent; }
  body {
    -webkit-text-size-adjust: 100%;}
  main article, main aside, main details, main figcaption, main figure,
  main footer, main header, main hgroup, main menu, main nav, main section {
    display: block; }

ul{list-style-type: none;}

.min {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important; font-weight: 600; }

.txt_bold {
	font-weight:bold;
}
a:hover img.over {
  opacity: 0.8;
  filter: alpha(opacity=80); }

a.none:link, a.none:visited, a.none:hover, a.none:visited:hover, a.none:active {
  text-decoration: none; }

.pc {
  display: block !important; }

.sp {
  display: none !important; }

.pc_inline {
  display: inline !important; }

.sp_inline {
  display: none !important; }

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important; }

  .pc_inline {
    display: none !important; }

  .sp {
    display: block !important; }

  .sp_inline {
    display: inline !important; } .page .cont1 .f-box1 {
	flex-direction: column;
	padding-top: 20px;
	padding-bottom: 10px;
}
}

.notes {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1.4; }
  @media only screen and (max-width: 767px) {
    .notes {
      font-size: 0.875rem;
      line-height: 1.4; } }


/* Breadcrumbs
======================= */
.breadcrumbs {
  background-color: #fff;
  text-align: left;
  color: #b2b2b2 !important;
  font-size: 12px;
  padding: 0 10px; }

.breadcrumbs a {
  text-decoration: none; }

.breadcrumbs a:link, .breadcrumbs a:visited {
  color: #808080 !important; }

.breadcrumbs a:hover, .breadcrumbs a:active {
  text-decoration: underline; }

.breadcrumbs ul {
  list-style: none;
  max-width: 950px;
  margin: 0 auto;
  padding: 14px 0 25px; }

.breadcrumbs li {
  display: inline-block; }

/* footter fix
======================= */
.footer-upper .col-middle .row {
  margin-bottom: 9px; }

.footer-upper .col-middle .row:last-child {
  margin-bottom: 0; }

@media only screen and (max-width: 767px) {
  .footer-upper .col-middle .row {
    margin-bottom: 5px; }

  .footer-upper .col-middle .link-frame:first-child {
    margin-top: 0; }

  .footer-upper .col-middle .link-frame img {
    position: static;
    max-width: 162px;
    margin-top: -3px; } }
/* =================================================
	base style
=================================================*/
main {
  font-family:sans-serif;
  font-size: 0.95rem;
  font-weight:normal;
      line-height: 1.8; }
  main a {
    color: #4b44aa; }
    main a:link {
      color: #4b44aa; }
    main a:visited {
      color: #2d2966; }
    main a:hover {
      color: #935dd8; }
    main a:visited:hover {
      color: #935dd8; }
    main a:active {
      color: #935dd8; }
  main .contents_area {
    width: 100%;
	 }
  main .page {
    width: 900px;
    margin: 0 auto;
    padding: 30px 0 60px; }



ruby {
	ruby-align: center;
}
rt {
	letter-spacing: -.2em;
	text-align: center;
}

 @media screen and (min-width: 768px) and (max-width: 930px){
	 
html, body{
	overflow-x: hidden;
}

body {
	padding-top: 34px;
	box-sizing: border-box;
}
 main {
	width:900px; 
 }	 

main .cont2 div.cont2_wrap_img {
	width: 700px;
 }	 
	 
 main .cont2 div.cont2_wrap_img img {
	 width: 350px;
 }	 
main .number .graph .text {
	float: left;
	width: 52%;
	margin-left: 15px;
	margin-top: 15px;
}
main .number .graph .zu {
	float: right;
	width: 45%;
}
 
main .shokubutu div h4 {
	width: 120px;
    padding: 0 0 5px;
}
 main .shokubutu div img {
	 width: 100px;
 }
 main .shokubutu div dl {
	 float:left;
	 width:430px;
	 margin-left:10px;
	 padding: 0 0 0 7px;
 }	 
	 
footer {
	width: 770px;
}
}
/* =================================================
	改行位置切り替え
=================================================*/
br.br-pc {
  display: inline;
}
br.br-sp {
  display: none;
}
br.br-tab {
  display: none;
}
br.br-tabmini {
  display: none;
}
br.br-iPhone {
  display: none;
}
br.br-se {
  display: none;
}
@media screen and (max-width: 768px) {
  br.br-pc {
    display: none;
  }
  br.br-sp {
    display: block;
  }
  br.br-tab {
    display: inline;
  }
}
@media screen and (max-width: 699px) {
  br.br-tabmini {
    display: inline;
  }
}
@media screen and (max-width: 600px) {
  br.br-sp {
    display: inline-block;
  }
}
@media screen and (max-width: 480px) {
  br.br-iPhone {
    display: inline;
  }
}
@media screen and (max-width: 320px) {
  br.br-se {
    display: inline;
  }
}
/* ===========================================================
Chapter.16 ウスベニアオイ
============================================================= */
.bg {
    background-image: url(../images/box_bg.jpg);
    background-position: top center;
    padding: 50px 0;
}
.bg img{
    width: 100%;
    height: auto;
}

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

.page_header{
    text-align: center;
    background-color: #90477c;
    padding: 40px 0 30px;
}
.page_header h1 img{
    width: 350px;
    margin: auto;
}
.page_header h2{
    font-size: 2em;
    margin:-10px auto 0;
    color: #FFF;
}

span.goldsticky {
    font-size: 1.7rem;
    padding: 13px 13px 13px 23px;
    background-image: linear-gradient(139deg, rgb(239 204 133) 17%, rgb(232 208 126) 35%, rgb(244 227 157) 53%, rgb(231 208 124) 78%, rgb(247 231 164));
    outline: 3px solid rgb(255, 255, 255);
    outline-offset: -7px;
    margin-right: 6px;
    color: #590f26;
}

.intro{
    font-size: 1.2em;
}

p.info {
    padding-right: 15px;
}


.flex_intro {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

section.intro.flex_intro>img {
    width: 175px;
}



.cont1{
    margin: 50px auto;
}

.img_01,.img_02,.img_03,.img_04{
    width: 100%;
    background-color: #FFF;
    padding: 20px;
    margin: 0 20px 0 0;
    box-sizing: border-box;
}
.img_01{
    border: 1px solid #ccc;
    margin: 0 20px 0 0;
}
.img_03{
    margin: 0 0px 0 0;
}

.text_s{
    font-size: 0.75em;
    text-align: left;
}

.cont1 h3{
    width: 100%;
    font-size: 1.35em;
  font-weight: bold;
  font-style: normal;
    padding: 5px 0px;
    margin: 0 auto 15px;
    text-align: center;
    color: #FFF;
    background-color: #90477c;
    border-radius: 2em;
    letter-spacing: 0.05em;
}


.cont2,.cont3{
    background-color: #FFF;
    border-radius: 30px;
    padding:0 50px 40px;
    text-align: center;
    margin: 80px 0 0 0;
}
.cont2 h3,.cont3 h3{
    font-size: 1.25em;
  font-weight: bold;
  font-style: normal;
    padding: 5px 30px;
    text-align: center;
    color: #923871;
    display: inline-block;
    background-color: #FFF;
    border-radius: 2em;
    border: 1px solid #aa63a4;
    letter-spacing: 0.05em;
    position: relative;
    top: -1.25em;
}

section.cont4 {
    padding: 24px 16px 24px;
    text-align: center;
    margin: 60px 0 0 0;
    background-color: #ffffffe6;
}

span.bottom-line {
    border-bottom: solid;
    font-weight: 600;
}

.base_txt{
    text-align: left;
    margin: 0 0 0px 0;
}

.img_h4{
    color: #923871;
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.img_02_box{
    width: 100%;
    margin: 0 10px 0px 0;
}
.img_02.flex{
    flex-direction: column;
    justify-content: center;
}

.img_05.flex {
    width: 70%;
    display: block;
	margin-right: 10px;
}

.img_06 {
    width: 30%;
}

.plant_box{
    align-items: center;
    margin: 0px 0 0 0;
}
img.plant_img{
    width: 150px;
    height: auto;
    margin: 0 20px 0 0;
}
.plant_h4{
    font-size: 1.1em;
    text-align: left;
    color: #af539b;
}
.plant_ul{
    text-align: left;
}
.plant_ul li{
    font-size: 0.85em;
    line-height: 1.3em;
    margin: 0 0 3px 0;
}
.plant_ul span{
    font-style:italic;
}


.img_04{
    width: 90%;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}
img.img_04-1,img.img_04-2{
    width: 92%;
}

.column_wrapper {
    border: double 4px #e0c87a;
    padding: 10px;
    margin-top: 24px;
	position: relative;
	text-align: left;
}

.column_wrapper>img {
    width: 215px;
    position: absolute;
    top: -15px;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
}

span.patent {
    background-color: #d7a616;
    padding: 6px 10px;
    border-radius: 5px;
    color: #fff;
}

span.patent_w {
 	background-color: #d7a616;
    padding: 10px 15px;
    border-radius: 5px;
    outline: 3px solid rgb(255, 255, 255);
    outline-offset: -7px;
    color: #fff;
    font-weight: 100;
    font-size: 1.2rem;
	margin-left: 4px;
}

.underline{text-decoration: underline;}
.blue{color: #0c7c98;}
.purple{color: #b70f5d;}
.pink{color: #923871;}
.orenji{color: #f08119;}
.gold{color: #85702e;}
/* ▽▽▽ 鉤括弧詰める ▽▽▽ */
.letterspace {
	letter-spacing: -0.8em;
}
/*
  main .ttl_chapter span {
	color: #005b15;
}
*/
/* △△△ 鉤括弧詰める △△△ */


#movie {
    margin: 40px auto;
    width: 640px;
}
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


@media only screen and (max-width: 767px) {
 .flex{
    flex-direction: column;

}
.bg {
    padding: 0px 0 0px;
    background-position:0% 0%;
}

.page_header{
    padding: 30px 10px 30px;
}
.page_header h1 img{
    width: 70%;
    max-width: 350px;
}
.page_header h2{
    font-size: 1.35em;
	line-height: 2.1rem;
}

main .page{
    width: 90%;
    margin: auto;
    }
.base_txt{
    margin: 0 0 20px 0;
}
.intro{
    font-size: 1.1em;
}


.cont1{
    margin: 50px auto;
}

.img_01{
    width: 90%;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 20px auto 0;
}
.img_02,.img_03,.img_04{
    width: 100%;
    padding: 10px;
    margin:0px auto 0;
    }
.img_03{
    margin: 20px 0 20px 0;
}
.img_04{
    margin: 0px 0 20px 0;
}

.cont1 h3{
    width: 100%;
    font-size: 1.2em;
    padding: 5px 0px;
    margin: 0 auto 20px;
}


.cont2,.cont3{
    padding:0 20px 30px;
    text-align: center;
    margin: 80px 0 0 0;
}
.cont2 h3,.cont3 h3{
    font-size: 1.15em;
    padding: 5px 20px;
    display: inline-block;
    position: relative;
    top: -1.5em;
    line-height: 1.35em;
}
	

/* Firefox */
@-moz-document url-prefix() {
 .cont2 h3,.cont3 h3 {
    line-height: 0.7em;
    padding: 15px 30px;
    }
}


.img_h4{
    font-size: 1.0em;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.img_02_box{
    width: 100%;
    margin: 0 10px 0px 0;
}

img.plant_img{
    width: 140px;
}


.plant_ul li{
    font-size: 0.85em;
}


.cont3 img.plant_img{
    margin: 0 0px 0 0;
}

.img_04{
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
img.img_04-1,img.img_04-2{
    width: 92%;
}
img.img_04-1{
    margin: 0 0 20px 0;
}
    
#movie {
        margin: 30px auto 0;
        width: 100%;
    }
.youtube {
        position: relative;
        /* width: 100%; */
        padding-bottom: 56.25%;
        /* padding-bottom: 48.5%; */
    }
	
section.intro.flex_intro>img {
    width: 205px;
}
	
span.goldsticky {
    font-size: 1.2rem;
    padding: 9px 9px 9px 16px;

}
	
.flex_intro {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
	
p.info {
    padding: 0 0 24px;
}
	
.img_05.flex {
    width: 92%;
    margin: 0 0 24px;
}
	
.img_06 {
    width: 92%;
}
	
span.patent_w {
    padding: 6px 9px;
    border-radius: 4px;
    outline: 2px solid rgb(255, 255, 255);
    outline-offset: -5px;
    font-size: 1rem;
    margin-left: 1px;
}
	
}