@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500&display=swap');
.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

/* 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; }

.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.18 カミツレ
============================================================= */
.bg {
    background-image: url(../images/box_bg.jpg);
    background-position: top center;
    padding: 50px 0;
}
.bg img{
    width: 100%;
    height: auto;
}

.flex{
    display: flex;
}

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

.intro{
    font-size: 1.2em;
    color: #fff;
}


.cont1{
    margin: 50px auto;
}


img.img_01{
    width: 90%;
    margin: 15px auto 20px;
}
img.img_02{
    width: 75%;
    margin: 15px auto;
}
img.img_03{
    width: 60%;
    margin: 20px auto;
}


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




.cont2,.cont1{
    background-color: #FFF;
    border-radius: 30px;
    padding:0 50px 40px;
    text-align: center;
    margin: 80px 0 0 0;
}
.cont2 h3,.cont1 h3{
    font-size: 1.3em;
  font-weight: bold;
  font-style: normal;
    padding: 10px 30px 13px;
    text-align: center;
    color: #141921;
    display: inline-block;
    background-color: #e3e6ff;
    border-radius: 2em;
    letter-spacing: 0.0em;
    position: relative;
    top: -1.25em;
    line-height: 1.25em;
}
.cont1 h3{
    top: -1.8em;
    line-height: 1.25em;
}
.base_txt{
    text-align: left;
    margin: 0 0 0px 0;
}



.column{
    width: 80%;
    background-color: #eef0ff;
    border-radius: 15px;
    padding:0px 25px 15px;
    margin: 0px 0 20px 30px;
}
.column h4{
    font-size: 0.9em;
  font-weight: bold;
  font-style: normal;
    padding: 5px 10px 5px;
    text-align: center;
    color: #FFF;
    display: inline-block;
    background-color: #696fe2;
    letter-spacing: 0.0em;
    position: relative;
    top: -1em;
    line-height: 1.25em;
}
.column h4:before {
content: "";
display:block;
width: 0;
height: 0;
border: 1em solid transparent;
border-right: 1em solid #696fe2;
position:absolute;
top:0;
left:-27px;
}
.column h4:after{
content: "";
display:block;
width: 0;
height: 0;
border: 1em solid transparent;
border-left: 1em solid #696fe2;
position:absolute;
top:0;
right:-27px;
}


.column p{
    text-align: left;
    font-size: 0.85em;
}

.end_txt{
    width: 80%;
    color: #FFF;
    margin: 65px auto 0;
    padding: 12px 5% 15px;
    font-size: 1.3em;
    position: relative;
}

.end_txt::before,
.end_txt::after {
   content: ""; /* 擬似要素の内容なし */
   height: 100%; /* ボックスの高さに合わせる */
   width: 0.75em; /* カッコの幅 */
   position: absolute; /* 配置（位置指定） */
   bottom: 0; /* 下端に配置 */
   border-top: 2px solid #FFF; /* 上部の線 */
   border-bottom: 2px solid #FFF; /* 下部の線 */
}

.end_txt::before {
   border-left: 2px solid #FFF; /* 左の角括弧 */
   left: 0; /* 左端に配置 */
}

.end_txt::after {
   border-right: 2px solid #FFF; /* 右の角括弧 */
   right: 0; /* 右端に配置 */
}



.underline{text-decoration: underline;}
.blue{color: #1444c9;}
.purple{color: #b70f5d;}


/* ▽▽▽ 鉤括弧詰める ▽▽▽ */
.letterspace {
	letter-spacing: -0.8em;
}
/* △△△ 鉤括弧詰める △△△ */



@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: 1.35em;
}

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

img.img_01{
    width: 100%;
    margin: 15px auto 20px;
}
img.img_02{
    width: 100%;
    margin: 15px auto;
}
img.img_03{
    width: 100%;
    margin: 20px auto;
}

.cont1{
    margin: 50px auto;
}


.cont2,.cont1{
    border-radius: 15px;
    padding:0 20px 30px;
    text-align: center;
    margin: 80px 0 0 0;
}
.cont2 h3,.cont1 h3{
    font-size: 1.1em;
    padding: 10px 20px;
    display: inline-block;
    position: relative;
    top: -1.5em;
    line-height: 1.35em;
}
.cont1 h3{
    display: inline-block;
    position: relative;
    top: -2.5em;
    border-radius: 50em;
    line-height: 1.3em;
}
    

.column{
    width: 80%;
    padding:0px 20px 15px;
    margin: 10px auto 30px;
}
    
.end_txt{
    width: 95%;
    margin: 50px auto 0;
    padding: 7px 7% 10px;
    font-size: 1.05em;
    box-sizing: border-box;
}
    
    
/* Firefox */
@-moz-document url-prefix() {
 .cont2 h3,.cont1 h3 {
    line-height: 0.7em;
    padding: 15px 30px;
    }
}

}