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

#dogcat_hoken{ max-width: 600px; width: 100%; margin: auto;}

#dogcat_hoken .a_l{ text-align: left;}
#dogcat_hoken .a_c{ text-align: center;}
#dogcat_hoken .a_r{ text-align: right;}
#dogcat_hoken sup{ font-size: 0.7em; vertical-align: super;}
#dogcat_hoken .gray_btn{ font-weight: bold; text-align: center;}
#dogcat_hoken .gray_btn a{ position: relative;text-decoration: none; display: inline-block; font-size: 1em; padding: 0.3em 2em 0.3em 2em; border: 2px solid #CCC; border-radius: 0.5em; margin: 1em auto 0em; background: #FFF;}
#dogcat_hoken .gray_btn a::after{ content: ""; position: absolute; color: #CCC; right: 0.5em; top: 0; bottom: 0; margin: auto; line-height: 1; width: 0.4em; height: 0.4em; border-top: 2px solid; border-right: 2px solid;transform:rotate(45deg);  }


#dogcat_hoken .co_wrap{ width: 95%; margin: auto;}


#dogcat_hoken .flex_wrap{
display:flex;justify-content:space-between;align-items:center;
}







#dogcat_hoken #osusume_no1{ padding: 1em 0.75em; text-align: center; margin-top: 1.5em; position: relative;}
#dogcat_hoken #osusume_no1::before,
#dogcat_hoken #osusume_no1::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 1px solid #555;}
#dogcat_hoken #osusume_no1::before{ left: -0.1em; top: -0.1em;}
#dogcat_hoken #osusume_no1::after{ left: 0.1em; top: 0.1em;}
#dogcat_hoken #osusume_no1 .ttl_text{}
#dogcat_hoken #osusume_no1 .ttl_text .text{ font-weight: bold; display: block; line-height: 1.4;}
#dogcat_hoken #osusume_no1 .ttl_text .text1{}
#dogcat_hoken #osusume_no1 .ttl_text .text2{ color: #AE924F;}
#dogcat_hoken #osusume_no1 .ttl_text .text3{ color: #E5336A; font-size: 1.5em;}
#dogcat_hoken.dog #osusume_no1 .ttl_text .text3{ color: #00B3DB; font-size: 1.5em;}

#dogcat_hoken #osusume_no1 .icon_wrap{ display: inline-block; text-align: left; line-height: 1.4;}
#dogcat_hoken #osusume_no1 .icon_wrap .text{ font-weight: 600; text-indent: -1.5em; padding-left: 1.5em; margin-top: 0.25em;}
#dogcat_hoken #osusume_no1 .icon_wrap .icon{ display: inline-block; width: 1.2em; vertical-align: 0.1em; text-indent: 0;}















#header{}
#header .co_wrap{ padding-bottom: 0.5em;  position: relative;}

#header .head_wrap{}
#header .head_wrap .benesse{ width: 4em; }
#header .head_wrap .inuneko{ width: 11em;}
#header .head_wrap .app{ width: 3em; height: 3em; border-radius: 0.5em; position: absolute; right: 3.75em; top: 1em;}
#header .head_wrap #hamburger{ width: 3em; height: 3em; position: absolute; right: 0em; top: 1em;}
#header .head_wrap #hamburger .wrap{ width: 3em; height: 3em; border-radius: 0.5em; background: #00743F; border: 1px solid #FFF;box-shadow: 0 0 0.1em 1px rgba(255,255,255,1); z-index: 99; position: fixed}
#header .head_wrap #hamburger .wrap span{ width: 60%; height: 2px; background: #FFF; margin: auto; position: absolute; left: 0; right: 0;
transition-property:transform;transition-duration:0.4s;}
#header .head_wrap #hamburger .wrap span.num1{ top: 0.55em;}
#header .head_wrap #hamburger .wrap span.num2{ top: 1.05em;}
#header .head_wrap #hamburger .wrap span.num3{ top: 1.55em;}
#header .head_wrap #hamburger .wrap .menu{ position: absolute; width: 60%; left: 0; right: 0; bottom: 0.3em; margin: auto;}

#header .head_wrap #hamburger.on .wrap span{}
#header .head_wrap #hamburger.on .wrap span.num1{transform:rotate(45deg); top:1.05em;}
#header .head_wrap #hamburger.on .wrap span.num2{transform:rotate(135deg); }
#header .head_wrap #hamburger.on .wrap span.num3{transform:rotate(-45deg); top:1.05em;}

#header .open_wrap { display: none; background: rgba(255,255,255,0.95); position: fixed; width: 100%; height: 100%; z-index: 91; left: 0; top: 0; overflow: auto;}
#header .open_wrap .wrap{ width: 90%; margin: auto; max-width: 540px;}
#header .open_wrap .nav{ line-height: 1.4; margin: 5.5em auto 1em;;}
#header .open_wrap .nav li{border-top: 2px dotted #999; padding: 0.3em 1em;}
#header .open_wrap .nav li:last-of-type{ border-bottom: 2px dotted #999;}
#header .open_wrap .nav li.big{ font-size: 1.1em; font-weight: bold; padding: 0.5em 0.9em;}
#header .open_wrap .nav li.small{ font-weight: 600; padding: 0.6em 1.1em;}
#header .open_wrap .nav li a{ text-decoration: none;}

#header .open_wrap .btn_wrap{ margin: 1.5em auto 1em;}
#header .open_wrap .btn_wrap .flex_wrap1{ width: 100%; margin: auto;justify-content:center;}
#header .open_wrap .btn_wrap .flex_wrap1 .btn{ width: 49%;}
#header .open_wrap .btn_wrap .flex_wrap1 .btn2{ margin: 0 1%;}
#header .open_wrap .btn_wrap .flex_wrap2{ width: 100%; margin: auto;justify-content:center;}
#header .open_wrap .btn_wrap .flex_wrap2 .btn{ width: 49%;}
#header .open_wrap .btn_wrap .flex_wrap2 .btn2{ margin: 0 1%;}

#header .open_wrap .add_ttl{ text-align: center; font-size: 1.1em; font-weight: bold;}
#header .open_wrap .add_ttl2{ margin-top: 0.75em;}

#header .open_wrap .btn_wrap .flex_wrap3{ margin: 1.5em auto 1em;  justify-content: center;}
#header .open_wrap .btn_wrap .flex_wrap3 .btn{ position: relative; background: #FFF; font-weight: bold; padding: 0.25em 0.5em 0.25em 0; border: solid 3px; border-radius: 0.5em; min-width: 15em; text-align: center;}
#header .open_wrap .btn_wrap .flex_wrap3 .btn a{ text-decoration: none;}
#header .open_wrap .btn_wrap .flex_wrap3 .mitumori{ border-color: #CCCCCC; margin-right: 0.5em;}
#header .open_wrap .btn_wrap .flex_wrap3 .seikyuu{ border-color: #CCCCCC;}
#header .open_wrap .btn_wrap .flex_wrap3 .btn::after{ content: ""; position: absolute; color: #CCC; right: 0.5em; top: 0; bottom: 0; margin: auto; line-height: 1; width: 0.4em; height: 0.4em; border-top: 2px solid; border-right: 2px solid;transform:rotate(45deg);  }





#footer{ margin: 2em auto 0; font-size: 0.7em;}
#footer .beige_bg{ text-align: center; background: #F4F2E9; padding: 1em 5%; margin: 0 auto 1em;}
#footer .beige_bg .small{ font-size: 0.9em;}
#footer .beige_bg .line{ border-bottom: 1px solid #C4BDA0; margin: 1em auto;}
#footer .link_wrap{ text-align: center; margin: 2.5em auto 1.5em;}
#footer .copy{ text-align: center;  margin: 0 auto 1em;}
#footer .copy .logo{ width: 9em; display: inline-block; margin-right: 1em;}
#footer .copy .text{ font-size:0.9em; display: inline-block; margin: 0.5em auto;}

#footer{}
#footer .fixed_bnr{}
#footer .wrap{position: fixed; bottom: 0; left: 0; right: 0; font-size: 1.25em; background: #8EC31F; box-shadow: 0 0 5px 0 rgba(0,0,0,0.6); z-index: 90;}
#footer .wrap .flex_wrap1{justify-content:center; padding: 0.4em 0;}
#footer .wrap .flex_wrap1 .btn{ position: relative; background: #FFF; font-weight: bold; padding: 0.25em 0.5em 0.25em 0; border: solid 3px; border-radius: 0.5em; min-width: 11em; text-align: center;}
#footer .wrap .flex_wrap1 .btn a{ text-decoration: none;}
#footer .wrap .flex_wrap1 .mitumori{ border-color: #D50000; margin-right: 0.5em;}
#footer .wrap .flex_wrap1 .seikyuu{ border-color: #777;}
#footer .wrap .flex_wrap1 .btn::after{ content: ""; position: absolute; color: #CCC; right: 0.5em; top: 0; bottom: 0; margin: auto; line-height: 1; width: 0.4em; height: 0.4em; border-top: 2px solid; border-right: 2px solid;transform:rotate(45deg);  }
#footer .wrap .flex_wrap1 .mitumori::after{ border-color: #D50000;}
#footer .wrap .flex_wrap1 .seikyuu::after{ border-color: #777;}

#footer .wrap .btn_wrap{background: #FFF; padding: 0.5em 0 0.75em; display: none;}
#footer .wrap .btn_wrap .flex_wrap2{ width: 95%; margin: auto;justify-content:center;}
#footer .wrap .btn_wrap .flex_wrap2 .btn{ width: 49%;  max-width: 180px;}
#footer .wrap .btn_wrap .flex_wrap2 .btn2{ margin: 0 1%;}
#footer .bottom_code{ text-align: right; margin: 1.5em auto 0.5em;}


#footer .wrap .add_ttl{ text-align: center; font-size: 1.1em; font-weight: bold;}
#footer .wrap .add_ttl2{ margin-top: 0.5em;}
#footer .wrap .btn_close{position: absolute;right: 0.5em;top: -1.5em;width: 3em;border: 1px solid #AAA;border-radius: 50%;}




/******************************
	モーダル用ここから
******************************/
body.modal_on{overflow:hidden;}
#dogcat_hoken .modal_base{ position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.8); font-size:1em; line-height:1.8; z-index:100;overflow: auto;
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
-webkit-box-pack:space-between;-moz-box-pack:space-between;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;
-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;
flex-wrap:wrap;
-moz-transition-property : transform;-webkit-transition-property : transform;-o-transition-property : transform;-ms-transition-property : transform;transition-property : transform;
-moz-transition-duration : 0.4s;-webkit-transition-duration : 0.4;-o-transition-duration : 0.4s;-ms-transition-duration : 0.4s;transition-duration : 0.4s;
-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);
}
#dogcat_hoken [modal_open]{ cursor: pointer;}
#dogcat_hoken .modal_base::before,
#dogcat_hoken .modal_base::after{ content:""; width:100%; height:50px;}
#dogcat_hoken .modal_base .modal_wrap{ position:relative; margin:auto; background:#FFF; padding:2em 1em; min-width: 280px; max-width:90%;}
#dogcat_hoken .modal_base .modal_wrap .modal_close{ position:absolute; right:-0.75em; top:-1em; width:2.25em; box-shadow: -0.05em 0.1em 0.15em 0 rgba(0,0,0,0.5); border-radius: 50%;}
/******************************
	モーダル用ここまで
******************************/



#dogcat_hoken .modal_wrap.common{ padding: 0; width: 90%; margin: auto; max-width: 540px;}
#dogcat_hoken .modal_wrap.common .wrap{ padding:2em 3%;}
#dogcat_hoken .modal_wrap.common .ttl{ text-align: center; font-size: 1.3em; font-weight: bold; margin-bottom: 0.5em;}
#dogcat_hoken .modal_wrap.common .ttl span{ display: inline-block;}
#dogcat_hoken .modal_wrap.common .maruback{ font-size: 1.1em; background: #CCC; color: #FFF; text-align: center; border-radius: 0.5em; padding: 0.3em; font-weight: bold; margin: 0.5em auto; line-height: 1.3;}
#dogcat_hoken .modal_wrap.common .text{ font-size: 0.9em;}
#dogcat_hoken .modal_wrap.common .text .list{ margin: 0.3em auto 0; text-indent: -1em; padding-left: 1em;}
#dogcat_hoken .modal_wrap.common .text .b{ font-weight: bold;}
#dogcat_hoken .modal_wrap.common .subttl{  text-align: center; font-weight: bold; font-size: 1em; margin: 1.5em auto 0.5em;}
#dogcat_hoken .modal_wrap.common .kome{ font-size: 0.8em; padding-left: 1em; text-indent: -1em; display: block;}
#dogcat_hoken .modal_wrap.common .kome2{ font-size: 0.8em; padding-left: 2em; text-indent: -2em; display: block;}
#dogcat_hoken .modal_wrap.common .green_bg{ background: rgba(142,195,31,0.2); text-align: center; padding: 1em 0;}
#dogcat_hoken .modal_wrap.common .usu_maru{ background: rgba(0,116,63,0.1);text-align: center;padding: 0;border-radius: 1em;width: 9em;margin: 1em auto 0.5em;}
#dogcat_hoken .modal_wrap.common .co_ttl{  line-height: 1.2;  font-size: 1.2em;  padding: 0.3em;}
#dogcat_hoken .modal_wrap.common .list_ttl{line-height: 1.4;font-size: 1.1em;margin: 1em auto;padding: 0.75em 0.75em 0.75em 1.5em;
font-weight: bold;background: #0c6d46; color: #FFF; text-indent: -1em; border-radius: 0.75em 0 0 0; position: relative;}
#dogcat_hoken .modal_wrap.common .list_ttl::after{content: "";position: absolute;right: 0.4em;width: 2px;height: 100%;background: #FFF;bottom: 0;}
#dogcat_hoken .modal_wrap.common .icon_wrap{ margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid;}
#dogcat_hoken .modal_wrap.common .icon_wrap .icon{ width: 2em; margin: 0 0.5em 0 0;}
#dogcat_hoken .modal_wrap.common .icon_wrap .ttl{flex: 1;font-weight: bold;font-size: 1em;text-align: left;  line-height: 1.3; font-size: 1.1em; margin: 0 auto;}
#dogcat_hoken .modal_wrap.common .icon_wrap .ttl span{ display: inline-block;}
#dogcat_hoken.cat .modal_wrap.common .icon_wrap{color: #ff6b7d;}
#dogcat_hoken.familly .modal_wrap.common .icon_wrap{color: #29aF34;}
#dogcat_hoken.petit .modal_wrap.common .icon_wrap{color: #f26a0b;}


#dogcat_hoken .modal_wrap.common .green_bg .text{line-height: 1.4; margin: 0 auto 0.2em;}
#dogcat_hoken .modal_wrap.common.maincolor_green .green_bg .ttl{ color:#00743F; font-size: 1.3em; font-weight: bold; margin: 0;}


#dogcat_hoken .modal_wrap.common.maincolor_green .ttl{ color: #50A094;}
#dogcat_hoken .modal_wrap.common.maincolor_green .maruback{ background: #50A094;}
#dogcat_hoken .modal_wrap.common.maincolor_blue .ttl{ color: #5877BE;}
#dogcat_hoken .modal_wrap.common.maincolor_blue .subttl{ color: #5877BE;}
#dogcat_hoken .modal_wrap.common.maincolor_blue .maruback{ background: #5877BE;}




#dogcat_hoken .modal_wrap.cost{ padding: 0; width: 90%; margin: auto; max-width: 540px;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap{ background: #F4F2E9;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .flex_wrap{ padding: 1em 3%;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .ttl{ background: #00743F; color: #FFF; text-align: center; font-weight: bold; font-size: 1.1em; padding: 0.2em;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .icon{width: 6em; margin-right: 0.5em;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .table{ flex: 1;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .table .td{ border-top: 1px solid;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .table .td:first-of-type{ font-weight: 600; margin-right: 1em;}
#dogcat_hoken .modal_wrap.cost .ttl_wrap .table .tr:last-of-type .td{ border-bottom: 1px solid;}

#dogcat_hoken .modal_wrap.cost .table{ display: table;}
#dogcat_hoken .modal_wrap.cost .table .tr{ display: table-row;}
#dogcat_hoken .modal_wrap.cost .table .td{ display: table-cell;}

#dogcat_hoken .modal_wrap.cost .wrap{ padding: 1em;}
#dogcat_hoken .modal_wrap.cost .wrap .sub_ttl{background: #00743F; color: #FFF; text-align: center; font-weight: bold; font-size: 1em; padding: 0.1em;}
#dogcat_hoken .modal_wrap.cost .wrap .table{ width: 100%; margin: 0.5em auto;}
#dogcat_hoken .modal_wrap.cost .wrap .table .td{ border-top: 1px solid; font-weight: bold;}
#dogcat_hoken .modal_wrap.cost .wrap .table .td:first-of-type{ border-right: 1px dotted #CCC; padding: 0 0.5em;}
#dogcat_hoken .modal_wrap.cost .wrap .table .td:last-of-type{ text-align: right; padding:0 0.5em;}
#dogcat_hoken .modal_wrap.cost .wrap .table .tr:first-of-type .td{ background: #F4F2E9;}
#dogcat_hoken .modal_wrap.cost .wrap .table .tr:last-of-type .td{ border-bottom: 1px solid;}

#dogcat_hoken .modal_wrap.cost .wrap .red_wrap{ text-align: center; line-height: 1.2;}
#dogcat_hoken .modal_wrap.cost .wrap .red_wrap .b{ font-weight: bold; font-size: 0.9em; margin-right: 0.5em;}
#dogcat_hoken .modal_wrap.cost .wrap .red_wrap .red_ttl{ font-weight: bold; font-size: 1.8em; color: #D50000;}
#dogcat_hoken .modal_wrap.cost .wrap .red_wrap .small{ font-size: 0.8em;}
#dogcat_hoken .modal_wrap.cost .wrap .sankaku{ width: 2.5em; margin:0.5em auto; line-height: 1;}

#dogcat_hoken .modal_wrap.cost .wrap .flex_wrap2{}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap{ text-align: center; line-height: 1.2; width: 49%;}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap .ttl{ color: #FFF; font-weight: 600; background: #CCC; border-radius: 1em; font-size: 0.9em;width: 100%; padding: 0.3em 0;}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap .text{ font-weight: bold; font-size: 0.8em; margin: 0.3em auto 0em;}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap .red{ font-weight: bold; font-size: 1.7em; color: #D50000;}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap .small{ font-size: 0.8em;}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap1 .ttl{ background: rgba(0,116,63,1);}
#dogcat_hoken .modal_wrap.cost .wrap .plan_wrap2 .ttl{ background: rgba(0,116,63,0.7);}

#dogcat_hoken .modal_wrap.cost .wrap .list{ font-size: 0.8em; margin: 0.8em auto 0; padding-left: 1em; text-indent: -1em; line-height: 1.4;}

#dogcat_hoken .modal_wrap.case{ width: 90%; margin: auto; max-width: 540px; background:none; padding: 0;}
#dogcat_hoken .modal_wrap.case .wrap{ padding: 0;}


#dogcat_hoken .modal_wrap.taisyougai{}
#dogcat_hoken .modal_wrap.taisyougai .ttl{}
#dogcat_hoken .modal_wrap.taisyougai .ttl span{ display: inline-block;}
#dogcat_hoken .modal_wrap.taisyougai .sub_ttl{ background: #DED; padding: 0.75em 0.5em;font-weight: 600;  margin: 2em auto 0.5em;}
#dogcat_hoken .modal_wrap.taisyougai .table_wrap{border: 1px solid #999;  margin: 1em auto 0.5em;}
#dogcat_hoken .modal_wrap.taisyougai .table_wrap .tr{}
#dogcat_hoken .modal_wrap.taisyougai .table_wrap .tr span{ display: inline-block;}
#dogcat_hoken .modal_wrap.taisyougai .table_wrap .th{background: #DFDFDF;padding: 0.3em 1em;margin: 0 auto 0.5em;}
#dogcat_hoken .modal_wrap.taisyougai .table_wrap .td{padding: 0 1em;  margin: 0 auto 2em;}




@media all and (min-width: 1025px) {

#dogcat_hoken{ max-width: none; width: 100%; margin: auto;}
#dogcat_hoken .co_wrap {width: 90%;}

#dogcat_hoken .pc_flexwrap{display:flex;justify-content:center;}
#dogcat_hoken .pc_flexwrap .pc_left{ width: 364px;background:#f4f2e9; position: relative; border-right: 1px solid #FFF;}
#dogcat_hoken .pc_flexwrap .pc_right{ max-width: 660px; width: 100%;flex: 1;}


#header{font-size: 16px;width: 364px;position: fixed;height: 100%;z-index: 90;}
#header .co_wrap{ padding:0 ; width: 100%; background: #FFF;}
#header .head_wrap{ padding:0 0 0.75em; width: 95%; position: relative; margin: auto; z-index: 90;}
#header .head_wrap .benesse{ width: 6em; padding: 0.5em 0 0;}
#header .head_wrap .inuneko{ width: 13em; margin:0.75em auto 0;}
#header .head_wrap .app{display: none;}
#header .head_wrap #hamburger{ display: none;}
#header .open_wrap { display: block !important; background:none; position: relative; width: 100%; height: auto; z-index: 90; left: 0; top: 0; overflow:visible;  padding-bottom: 1em;}
#header .open_wrap .nav{ line-height: 1.4; margin: 2em auto 2em;}

#dogcat_hoken #header{border-bottom: solid 250px #f4f2e9;border-right: 1px solid #FFF;overflow: auto;}
#header .open_wrap .btn_wrap .fixed_wrap{position: fixed;bottom: 0;width: 327px;padding-top: 10px;background: #f4f2e9;border-top: 1px solid #DDD;}
#header .open_wrap .nav li:last-of-type{border-bottom: none;}

	
#footer .fixed_bnr{ display: none;}
	
}