@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c);

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

strong {font-weight: bold;}

/*============================
layout
============================*/

html {
  height: 100%;
}

body {
	color: #333;
	font-size: 16px;
    font-family: 'Open Sans','Mplus 1p','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
	margin: auto;
	text-align: center;
	background: #fff;
    border-top: #667aaf solid 3px;
}

/*a {
	color: #000000;
	text-decoration:  none;
}*/

small {
	font-size: 77%;
}

.midashi1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0.5em auto;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 21px;
}

/* マーカー線・緑 */
.marker12 {
background:linear-gradient(transparent 75%, #bfff7f 75%);
font-weight:bold; 
}

.h_bc01 {
    background: url(../img/h_bc01.jpg) left center no-repeat;
    background-size: contain;
    padding: 0.3em;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

/*============================
hr
============================*/

hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

.fade {
  height: 1px;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%);
}
 
.fade-2 {
  border-width: 0 0 2px;
  border-image: linear-gradient(
    90deg,
    hsla(100, 100%, 100%, 0),
    hsla(100, 100%, 100%, 0.5) 50%,
    hsla(1000, 100%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}




/*============================
header
============================*/

.head_w {
    width: 100%;
    border-bottom: #667aaf solid 1px;
}

.head {
    width: 1024px;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 20px;
}

.head_status div {
    margin: auto;
}

.hs_m1 {
    text-align: center;
    background: #efefef;
    padding: 2px 5px;
    border-radius: 5px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
    background: rgb(242,245,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}

.tel {
    font-size: 28px;
    text-align: left;
    color: dimgrey;
}

.otoiawase {
    color: #667aaf;
    border: 2px solid #4da619;
    border-radius: 10px;
    padding: 5px;
}

.otoiawase a{
    color: #667aaf;
}

.otoiawase a:hover{
    color: #bdcfff;
}

.otoiawase img:hover{
    opacity: 0.5;
}

.index_billboard {
    
    background: #92c000;
    
}

/*============================
head
============================*/

.head_about {
    color:#667aaf;
    font-weight: bold;
}

.head_about span{
    color:#333;
    font-weight: bold;
    font-size: 13px
}

/*============================
index_mini_billboard
============================*/

.index_mini_billboard {
    margin: auto;
    padding: 1em 0;
    text-align: center;
    width: 1024px;
}

.index_mini_billboard_a a:hover{
    
    opacity: 0.5;
    
}

.index_mini_billboard_a img:hover{
    
    opacity: 0.5;
    
}

.index_bunsyou {
    width: 1024px;
    margin: auto;
    padding: 1em;
}

.index_bunsyou p {
    padding: 1em;
    text-align: left;
    background: ;
    border: 1px solid #111;
    border-top: 0;
    background: rgba(192, 229, 252, 0.29) right bottom url(../img/index/sanwa_bg_index_bunsyou.png) no-repeat;
    background-size: 28%;
    
}

/*============================
menu
============================*/

.menu {
    font-family: "M PLUS Rounded 1c";
    font-size: 21px;
    font-weight:bold;
    padding: 0.5em;
    border-top: #aaa solid 1px;
    border-bottom: silver solid 1px;
}

.menu div {
    border-right: #aaa solid 1px;
}

.menu div:first-child {
    border-left: #aaa solid 1px;
}

.menu_main {
    width: 1024px;
    margin: auto;
    text-align: center;
}

.menu a {
    text-decoration: none;
    color: #667aaf;
    padding: 5px;
}

.menu a:hover{
  color: #8fa7d1;
  font-weight: bold;
  background: rgba(148, 202, 199, 0.31);
  border-radius: 10px;
}

.menu_now a{
    color: #53b23b;
    font-weight: bold;
}

.menu_now a{
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.menu_now a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0px;/*アイコンの位置*/
  top: 5px;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

.menu_mini_bottom {
    padding: 1em;
    border-top: 3px double #667aaf; 
}

.menu_mini_bottom a{
    color: #667aaf;
}

.menu_mini_bottom a:hover{
    color: #14c797;
    font-weight: bold;
}

.menu_mini_bottom_now a{
    color: #14c797;
    font-weight: bold;
}

/*============================
content
============================*/

.content {
    width: 1024px;
    text-align: left;
    margin: auto;
}


/*============================
g_cal
============================*/

.g_cal h3 {
    
}

.g_cal {
    text-align: center;
    margin: auto;
    padding: 2em 0;
}

/*============================
scr
============================*/
.scr {
  overflow: scroll;   /* スクロール表示 */ 
}

#news {
    text-align: left;
}

/*============================
sub_status
============================*/

.sub_status h3{
    margin: 1em auto;
}

.sub_status_span {
    border-radius: 10px;
    font-weight: bold;
    padding: 2px 8px;
    margin: auto;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
    background: rgb(245,246,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.sub_status_span_ns {
    border-radius: 10px;
    font-weight: bold;
    padding: 2px 8px;
    margin: auto;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8ffe8+0,e3f5ab+33,b7df2d+100;Green+3D+%234 */
    background: rgb(248,255,232); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(248,255,232,1) 0%, rgba(227,245,171,1) 33%, rgba(183,223,45,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
}

/*============================
time_table
============================*/

.time_table {
    width: 1024px;
    margin: auto;
    text-align: center;
}

.time_table  th {
    text-align: center;
    background-color: #bfff7f;
    font-weight: bold;
    padding: 10px;
}

.time_table td {
    text-align: center;
    font-weight: bold;
    padding: 10px;
}

.time_table_eigyou {
    font-weight: bold;
    color: #0587ad;
}

.time_table_yasumi {
    font-weight: bold;
    color: firebrick;
}

.time_table_bottom {
    text-align: right;
}

/*============================
c_w
============================*/

.c_w {
    width: 1200px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.8); 
    border-radius: 20px;
    border: 1px solid #c34b7f;
}

/*============================
contact_table
============================*/

.contact_table {

    
}

.contact_table div {
    margin: 0.2em auto;
    line-height: 200%;
}

.contact_table h3 {
    font-size: 24px;
    margin: 1em auto;
    font-weight: bold;
}

.contact_table h3:first-letter {
font-size: 1.2em;
color: #7172ac;
}

.contact_table strong {
    font-weight: bold;
}

.contact_table input {
    padding: 0.5em;
    border-radius: 20px;
}

.contact_table textarea{
    padding: 0.5em;
    border-radius: 20px;
}

.contact_table input[type="submit"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="submit"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="submit"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_table input[type="reset"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="reset"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="reset"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_setumei {
    
    width: 640px;
    background: rgba(255,255,255,0.8);
    border-radius: 20px;
    border: 2px solid #c34b7f;
    
}

/*============================
lesson
============================*/

.lesson {
    width: 1024px;
    font-size: 24px;
    margin: auto;
}

.lesson h2{
    font-size: 28px;
    font-weight: bold;
}

.lesson h3{
    font-size: 24px;
    margin: 2em auto 0.5em;
    font-weight: bold;
}

.lesson div{
 line-height: 200%;
　text-align: left;  
}

.lesson p {
 line-height: 250%;
　text-align: left;  
}

.lesson i{
    color: crimson;
}

.lesson_plus {
    width: 1024px;
    font-size: 24px;
    margin: 1em auto;
    border-top: 2px solid #c40026; 
}

.lesson_plus h2{
    font-size: 28px;
    font-weight: bold;
    margin: 1em auto;
}

.lesson_plus div{
 line-height: 250%;
text-align: left;  
}

.lesson_plus i{
    color: crimson;
}

.lesson_plus_contact {
    padding: 0.2em;
    width: 800px;
    margin: 1em auto;
    line-height: 180%;
    border: double 5px #c34b7f;
}

.lesson_plus_img {
    text-align: center;
    margin: auto;
}

.lesson_plus_img p{
    font-size: 18px;
    margin: 5px auto;
    text-align: center;
    padding: 5px;
    
}

#lesson_cal {
    margin: auto;
    text-align: center;
}

/*============================
about
============================*/

.about {
    width: 840px;
    margin: auto;
}

.about p {
    line-height: 200%;
    font-size: 21px;
}

.about h3 {
    margin: 1.5em auto 1em;
    font-size: 28px;
}

.about h3{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}

.about h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about2 h3{
position: relative;
background: #ef9c99;
box-shadow: 0px 0px 0px 5px #ef9c99;
border: dashed 1px #c5004c;
padding: 0.2em 0.5em;
color: #454545;
}

.about2 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #c5004c;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about3 h3{
position: relative;
background: #96c79a;
box-shadow: 0px 0px 0px 5px #96c79a;
border: dashed 1px #4da619;
padding: 0.2em 0.5em;
color: #454545;
}

.about3 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #4da619;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about4 h3{
position: relative;
background: #fdca8a;
box-shadow: 0px 0px 0px 5px #fdca8a;
border: dashed 1px #ec9800;
padding: 0.2em 0.5em;
color: #454545;
}

.about4 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ec9800;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about5 h3{
position: relative;
background: #a586b3;
box-shadow: 0px 0px 0px 5px #a586b3;
border: dashed 1px #53005d;
padding: 0.2em 0.5em;
color: #fff;
}

.about5 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #53005d;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about6 h3{
position: relative;
background: #d1df9c;
box-shadow: 0px 0px 0px 5px #d1df9c;
border: dashed 1px #92c000;
padding: 0.2em 0.5em;
color: #fff;
}

.about6 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #92c000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about h4 {
    margin: 1.5em auto 1em;
    font-size: 18px;
}

.about8 h3{
position: relative;
background: #ed9db9;
box-shadow: 0px 0px 0px 5px #ed9db9;
border: dashed 1px #92c000;
padding: 0.2em 0.5em;
color: #fff;
}

.about8 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ff1493;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/*============================
main
============================*/

.main {
    margin: 0;
    padding: 0;
}

/*============================
index
============================*/

.bb {
    background: url(../img/bb.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb a{
    color: #fff;
}

.bb_t {
    background: url(../img/bb_n_turu.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_t a{
    color: #fff;
}

.bb_p {
    background: url(../img/bb_n_pan_kasa.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_p a{
    color: #fff;
}

.bb_pp {
    background: url(../img/bb_n_pan_p.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_pp a{
    color: #fff;
}

/*============================
soshiryou_main
============================*/

.soshiryou_main {
    width: 1024px;
    margin: auto;
}

.soshiryou_h5 {
    text-align: left;
    font-size: 24px;
}

.soshiryou_main h5 {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #fff0d9;
  font-size: 20px;
  color: #2d2d2d;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 3px orange;
  z-index:-2;
}

.soshiryou_main h5:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.soshiryou_main h5:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}


/*============================
haigou_main
============================*/

.haigou_main {
    width: 1024px;
    margin: auto;
    font-size: 1.5em;
}

.haigou_main h1 {
  padding: 1rem 2rem;
  color: #fff;
        font-weight: bold;
    font-size: 1.5em;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

.haigou_main h2 {
  padding: 1rem 3rem;
    font-weight: bold;
    font-size: 1.5em;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}


.haigou_main h3 {
  position: relative;
  padding: 15px 15px 15px 42px;
  background: #77c3df;
        font-weight: bold;
    font-size: 1.2em;
  color: white;
    margin: 1em;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

.haigou_main h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

.haigou_main h4 {
  padding: 1rem 3rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

.haigou_main_otoiawase {
    
    border: 2px solid #92c000;
    border-radius: 20px;
    padding: 1em;
    background: #eef7cd;
}

.youton {
    font-size: 24px;    
}

/*============================
viewer_lesson
============================*/

.viewer_lesson {
    padding-top: 2em;
    margin: 0 auto;
    width: 420px;
    height: 560px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_lesson ul {
    width: 420px;
    height: 560px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_lesson ul li {
    top: 0;
    left: 0;
    width: 420px;
    height: 560px;
    margin: 0 auto;
    text-align: center;
    display: none;
    position: absolute;
}


/*============================
viewer_info
============================*/

.viewer_info {
    padding-top: 2em;
    margin: 0 auto;
    width: 360px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info ul {
    width: 360px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info ul li {
    top: 0;
    left: 0;
    width: 360px;
    height: 480px;
    margin: 0 auto;
    text-align: center;
    display: none;
    position: absolute;
}


/*============================
viewer_info2
============================*/

.viewer_info2 {
    padding-top: 2em;
    margin: 0 auto;
    width: 360px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info2 ul {
    width: 360px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info2 ul li {
    top: 0;
    left: 0;
    width: 360px;
    height: 480px;
    text-align: center;
    margin: 0 auto;
    display: none;
    position: absolute;
}

/*============================
viewer_info3
============================*/

.viewer_info3 {
    padding-top: 2em;
    margin: 0 auto;
    width: 640px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info3 ul {
    width: 640px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info3 ul li {
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    text-align: center;
    margin: 0 auto;
    display: none;
    position: absolute;
}

/*============================
square_btn
============================*/

.square_btn{
    display: inline-block;
    position: relative;
    margin: 2em auto;
    padding: 0.35em 1em;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    text-decoration: none;
}

.square_btn:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: -webkit-calc(100% - 16px);
    width: calc(100% - 16px);
    height: 0;
    border: solid 8px transparent;
    border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.square_btn:active{/*押したとき*/
    padding: 0.32em 0.9em;
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.square_btn:active:before{ 
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
}

.square_btn:active:before{
   top:-12px;
   border-width: 6px;
}

/*============================
flexbox
============================*/

.flex_w {
	display: -webkit-flex;
	display: flex;
	width: 100%;
}

.flex_wc {
	display: -webkit-flex;
	display: flex;

}

.flex1 {
	-webkit-flex: 1;
	flex: 1;
}

.flex2 {
	-webkit-flex: 2;
	flex: 2;
}

.flex3 {
	-webkit-flex: 3;
	flex: 3;
}

.flex4 {
	-webkit-flex: 4;
	flex: 4;
}

.flex5 {
	-webkit-flex: 5;
	flex: 5;
}

.flex6 {
	-webkit-flex: 6;
	flex: 6;
}

.flex7 {
	-webkit-flex: 7;
	flex: 7;
}

.flex8 {
	-webkit-flex: 8;
	flex: 8;
}

.flex9 {
	-webkit-flex: 9;
	flex: 9;
}

.flex10 {
	-webkit-flex: 10;
	flex: 10;
}

/*============================
ul
============================*/

ol{  
	width: 100%;
	padding: 0.3em;
	padding-left: 2em;
	list-style-type: circle
}


li{
	text-align: left;
	margin: 3px;
}

/*============================
globalNav_f
============================*/

.globalNav_f {
	list-style: none;
	overflow: hidden;
    margin: auto;
    background: #fff;
}

.globalNav_f li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav_f li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
    font-size: 16px;
}

.globalNav_f li a:hover {
	background: #EEE;
}

.active {
	background: #333;
	color: #fff;
}

/*============================
dl 
============================*/

dl{  
  font-family: "Sawarabi Mincho";
}

dt{
  font-size: 18px;
  padding: 0.5em;
  padding-top: 1em;
  width : 12em;
  text-align: left;
  float : left;/* 左に寄せる */
  clear : both;/* フロートの解除 */
  border-bottom: 1px #ec9800 dashed;
  line-height: 180%
  font-family: "Sawarabi Mincho";
}

dd {
  font-size: 18px;
  padding: 0.5em;
  padding-left: 5em;
  text-align: left;
  margin-left : 11.5em;/* DTの幅分の設定 */
  border-bottom: 1px #ec9800 dashed;
  line-height: 180%;
  font-family: "Sawarabi Mincho";
}


.small{font-size:10px}

/*============================
photo
============================*/

.photo_r {
    position: relative;
}

.photo {
	margin: 20px 0;
	position: absolute;
	display: inline-block;
	width: 280px;
	height: 186px;
	border: 3px solid #fff;
	box-shadow: 0 0 4px #999;
	transform: rotate(5deg); /* 全体を回転 */
	overflow: hidden; /* 不要部分は消す */
	box-shadow:5px 5px 10px 1px #000000;
	-moz-box-shadow:5px 5px 10px 1px #000000;
	-webkit-box-shadow:5px 5px 10px 1px #000000;
	bottom: 20px;
	right: 20px;
    z-index: 999;
}
.photo img {
	margin-top: 0;
	margin-left: -30px; /* ポジション調整 */
	transform-origin: 0 0;
}

.photo_2nd {
	margin: 20px 0;
	position: absolute;
	display: inline-block;
	width: 280px;
	height: 186px;
	border: 3px solid #fff;
	box-shadow: 0 0 4px #999;
	transform: rotate(-5deg); /* 全体を回転 */
	overflow: hidden; /* 不要部分は消す */
	box-shadow:5px 5px 10px 1px #000000;
	-moz-box-shadow:5px 5px 10px 1px #000000;
	-webkit-box-shadow:5px 5px 10px 1px #000000;
	bottom: 20px;
	right: 20px;
}

.photo_2nd img {
	margin-top: 0;
	margin-left: -30px; /* ポジション調整 */
	transform-origin: 0 0;
}

.photo120 {
	margin: 20px 0;
	position: absolute;
	display: inline-block;
	width: 120px;
	height: 80px;
	border: 3px solid #fff;
	box-shadow: 0 0 4px #999;
	transform: rotate(5deg); /* 全体を回転 */
	overflow: hidden; /* 不要部分は消す */
	box-shadow:5px 5px 10px 1px #000000;
	-moz-box-shadow:5px 5px 10px 1px #000000;
	-webkit-box-shadow:5px 5px 10px 1px #000000;
	bottom: 0px;
	right: 60px;
}

.photo180 {
	margin: 20px 0;
	position: absolute;
	display: inline-block;
	width: 180px;
	height: 120px;
	border: 3px solid #fff;
	box-shadow: 0 0 4px #999;
	transform: rotate(5deg); /* 全体を回転 */
	overflow: hidden; /* 不要部分は消す */
	box-shadow:5px 5px 10px 1px #000000;
	-moz-box-shadow:5px 5px 10px 1px #000000;
	-webkit-box-shadow:5px 5px 10px 1px #000000;
	top: 0px;
	right: 60px;
}

/*============================
Footer
============================*/

footer {
	width: 10000px;
	text-align: center;
	margin: auto;
	background: #454968;
	color: #4da619;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
}

footer .footer_c {
	margin: auto;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

footer .footer_c a {

	color: #fafafa;

}

footer .footer_c_div_w {

	border: 1px solid #afb0be;

}

.footer_chiharuya {
	width: 100%;
	text-align:center;
	margin:0 auto;
	padding: 5px 0;
	font-size: 15px;
	background: #eee;
	border-top: 1px solid #aaa;
}

.footer_chiharuya a{
	color: ;
}

.footer_chiharuya a:hover{
	color: #ff9302;
	text-decoration: underline;
}

.copyright{
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	color: #333;
}

.copyright a{
	color: ;
}

.copyright a:hover{
	color: #ff9302;
	text-decoration: underline;
}

/* footer button end */

.padding_left_10 {
	padding-left: 10px;
}

.float_left {
	float: left;
}
.clear {
	clear: both;
}

/*============================
marquee
============================*/

.marquee {
width:100%;
padding: 0;
overflow:hidden;
/*background-color:#f6f6f6;*/
margin-bottom:0px;
position:relative;
}

.marquee p:after {
content:"";
white-space:nowrap;
padding-right:0px;
}

.marquee p {
margin:0;
padding-left:0px;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*============================
marquee_l
============================*/

.marquee_l {
width:100%;
padding: 0;
overflow:hidden;
background-color:#f6f6f6;
margin-bottom:0px;
position:relative;
}

.marquee_l p:after {
content:"";
white-space:nowrap;
padding-right:0px;
}

.marquee_l p {
margin:0;
padding-left:0px;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee_l {
  from   { -webkit-transform: translate(-100%);}
  99%,to { -webkit-transform: translate(0%);}
}
@-moz-keyframes marquee_l {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee_l {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee_l {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee_l {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}


/*============================
MotionTEXT
============================*/

#line1 {
  height:10px;
  width:50%;
  background-color:white;
  position:absolute;
  top:50%;
  margin-top:-5px;
  left:50%;
  margin-left:-25%;
}

#line2 {
  height:10px;
  width:50%;
  background-color:white;
  position:absolute;
  top:50%;
  margin-top:-5px;
  left:50%;
  margin-left:-25%;
}
.desinks {
  color:white;
  font-family:'Open Sans Condensed', sans-serif;
  font-weight:bold;
  text-transform:uppercase;
  font-size:8em;
  text-align:center;
  transform: skew(0) rotate(0);
  top:50%;
  margin-top:-0.7em;
  left:50%;
  margin-left:-2.4em;
  position:absolute;
  display:none;
  
}

/*============================
reborn
============================*/

.ribbon {
   width: 300px;
   position: absolute;
   margin: 0 auto;
   text-align: center;
   font-size: 20px!important;
   background: #d64b4b;
   background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
   background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
   background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
.ribbon h1 {
   font-size: 25px!important;
   color: #801111;
   text-shadow: #d65c5c 0 1px 0;
   margin:0px auto;
   padding: 15px 10px;
   }
.ribbon:before, .ribbon:after {
   content: '';
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #c23a3a;
   z-index: -1;
   }
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   }
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #871616 transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }
.ribbon-stitches-top {
   margin-top:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
   }
.ribbon-stitches-bottom {
   margin-bottom:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
   }
.ribbon11-2 {
    display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

.ribbon11-2:before{
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: -2;
    border: 20px solid #a5cff3;
    border-left-color: transparent;
}

.ribbon11-2:after{
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: -2;
    border: 20px solid #a5cff3;
    border-right-color: transparent;
}

.ribbon11-2 h3 {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    color: #008eff;
    text-shadow: 0 0 2px #FFF;
    background: -webkit-repeating-linear-gradient(-45deg, #b0daff, #b0daff 3px,#cfe8ff 3px, #cfe8ff 7px);
    background: repeating-linear-gradient(-45deg, #b0daff, #b0daff 3px,#cfe8ff 3px, #cfe8ff 7px);
}

.ribbon11-2 h3:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #7fafd9;
}

.ribbon11-2 h3:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #7fafd9;
}

.ribbon2 {
    display: inline-block;
    position: relative;
    height: 60px;
    width: 90%;;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    padding: 7px 0;
    font-size: 18px;/*フォントサイズ*/
    background: #78d0f5;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}

.ribbon2 h3 {
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0 30px;
    border-top: dashed 1px #FFF;/*上の破線*/
    border-bottom: dashed 1px #FFF;/*下の破線*/
    line-height: 46px;
}

.ribbon2:before, .ribbon2:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon2:before{/*左端の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon2:after{/*右端の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}
/*=====================================
SNS Button
=====================================*/

.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

.insta_btn3 {/*ボタンの下地*/
  
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    position: relative;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/*=====================================
syouhyou_table
=====================================*/

.syouhyou_table {
    
    
    
}

.syouhyou_table_nai {
    margin: auto;
    text-align: center;
    width: 800px;
    
}

.syouhyou_table_nai table {
    margin: auto;
    text-align: center;
    width: 800px;
}

.syouhyou_table_nai table th {
    margin: auto;
    text-align: left;
    width: 320px;
}



.stth {
    background: #f3cbdb;
    color: #d86f98;
    text-align: left;
    padding: 0.5em 1em;
    border: #c34b7f 1px solid;
    border-bottom: 0;
}

.sttd {

    background: #fff;
    text-align: left;
    padding: 0.5em 1em;  
    border: #c34b7f 1px solid;
    border-bottom: 0;
}


/*=====================================
privacy
=====================================*/

.privacy {
    
    font-size: 18px;
    margin: auto;
    
}

.privacy h1 {
    
    font-size: 24px;
    margin: 1em auto;
    
}

.privacy h2 {
    
    font-size: 21px;
    margin: 1em auto;
}

.privacy p div {
    
    font-size: 21px;
    margin: 1em auto;
    line-height: 180%;
}


/*=====================================
shop
=====================================*/

.shop_php {
    text-align: center;
    margin: auto;
}

.shop_php table{
    text-align: center;
    margin: 1em auto;
    border: 1px solid #333;
}

.shop_php table td{
    text-align: center;
    margin: auto;
    padding: 0.5em;
    border: 1px solid #333;
}


.shop h2 {
    font-size: 36px;
    font-weight: bold;
}

/*=====================================
仮
=====================================*/

.naiyou_kari {
    width: 640px;
    margin: 160px auto 0;
    border: 1px solid #aaa;
    border-radius: 20px;
    background: url(../img/kari/099297.png) no-repeat bottom right;
    background-size: 150px;
}

/*=====================================
見出し
=====================================*/

.head_test {
    margin:  0;                 /* デフォルトCSS打ち消し */
    font-size:  24px;           /* 文字サイズ指定 */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #feeaac;  /* 背景色指定 */
    padding:  10px;             /* 余白指定 */
    margin-bottom: 15px;        /* 周りの余白指定 */
    border-radius:  2px;        /* 角丸指定 */
}
p {
    margin:  0;                 /* デフォルトCSS打ち消し */
    line-height: 2;             /* 行間調整 */
}
.head_test:before {
    content:  '';               /* 空白の要素を作る */
    background-color: #b3b3b3;  /* 背景色指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left: 50%;                  /* 位置調整 */
    height: 60%;                /* 高さ指定 */
    top: 26%;                   /* 位置調整 */
    z-index:  -1;               /* 重なり調整 */
    width: 46%;                 /* 幅指定 */
    box-shadow: 0 0 8px 8px #b3b3b3;/* 影指定 */
    transform: rotate(3deg);    /* 回転 */
}

h2{
    text-align: left;
    border:solid 1px #ddd;
  -moz-border-radius: 5px; /* FF */
  -webkit-border-radius: 5px;/* Webkit */
  border-radius: 5px;
  background: #eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background: -moz-linear-gradient(top,  #fff,  #eee);
    padding: 5px;
  -pie-background:linear-gradient(top,  #fff,  #eee);
  behavior: url(http://www.webcreatorbox.com/sample/images/PIE.htc);  /* ie */
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}
h2 span {
  border-left:5px #3cf solid;
  padding-left:10px;
}




/*=====================================
table.company
=====================================*/

table.company {
width: 780px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 15px;
font-size: 21px;
}

table.company th,
table.company td {
padding: 10px;
}

table.company th {
background: #295890;
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #fff;
font-weight: normal;
font-size: 21px;
}

table.company th:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #295890;
border-width: 10px;
margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() {
table.company th::after {
float: right;
padding: 0;
left: 30px;
top: 10px;
content: " ";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border: 10px solid transparent;
border-left: #295890 10px solid;
margin-top: -10px;
}
}

table.company td {
background: #f8f8f8;
width: 360px;
padding-left: 20px;
}



/*=====================================
head_test
=====================================*/

.head_test_4 {
    margin: 1em 0;             /* デフォルトCSS打ち消し */
    font-size:  36px;       /* 文字サイズ指定 */
    position:  relative;    /* 位置調整 */
    font-weight:  bold;   /* 文字の太さ調整 */
    margin-bottom: 15px;    /* 周りの余白指定 */
    border-bottom: solid 4px rgba(76, 175, 80, 0.6);        /* 線指定 */
    border-radius: 0px 0px 160px 180px/0px 0px 20px 4px;    /* 角丸指定 */
}
p {
    margin:  0;         /* デフォルトCSS打ち消し */
    line-height: 2;     /* 行間調整 */
}


.head_test_2 h3 {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

.head_test_2 h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}