@charset "UTF-8";


/* =============================================================================
   #body
   ========================================================================== */
body{ 
background-color:#fff;
box-sizing:border-box;
}



/* =============================================================================
   #Loading
   ========================================================================== */
.loading {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #dcf4ec;
}
.loading__img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -95px;
margin-top: -85px; 
width: 200px;
height: 135px;
}



/* =============================================================================
   #effect, action...
   ========================================================================== */


/*doc
---
name: effect-xxx
category: general
tag: effect, action...
---
*/
.effect-fade {
opacity : 0;
transform : translate(0, 40px);
transition : all 400ms;
}
.effect-fade.effect-scroll {
opacity : 1;
transform : translate(0, 0);
}

.effect .effect-fade:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
.effect .effect-fade:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}
.effect .effect-fade:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}
.effect .effect-fade:nth-of-type(5) {
-moz-transition-delay:800ms;
-webkit-transition-delay:800ms;
-o-transition-delay:800ms;
-ms-transition-delay:800ms;
}
.effect .effect-fade:nth-of-type(6) {
-moz-transition-delay:1000ms;
-webkit-transition-delay:1000ms;
-o-transition-delay:1000ms;
-ms-transition-delay:1000ms;
}



/* =============================================================================
   #br
   ========================================================================== */
@media screen and (min-width:1024px){
.br-tb { display:none; }
}
@media screen and (max-width:1024px){
.br-tb { display:block; }
}
@media screen and (min-width:740px){	
.br-pc { display:block; }
.br-sp { display:none; }
}
@media screen and (max-width:740px){	
.br-pc { display:none; }
.br-sp { display:block; }
}



/* =============================================================================
   #Layout
   ========================================================================== */


/*doc
---
name: br_sp
category: general
tag: layout
---
*/
.br-sp {
display:none;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px) {

.br-sp{
display:inline;
}

}


/*doc
---
name: cssbtn
category: general
tag: button
---
*/
.cssbtn {
display: inline-block;
text-align: center;
outline: none;
box-sizing:border-box;
}
.cssbtn::before,
.cssbtn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
.cssbtn,
.cssbtn::before,
.cssbtn::after {
-webkit-transition: all .3s;
transition: all .3s;
}



/* #sp-menu
  -------------------------------------------------------------------------- */
#sp-menu{ display: none; }

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

#sp-menu{
display: block;
position:fixed;
top:0;
left:0;
z-index:200;
width:100%;
}
#sp-menu .btn {
position: absolute;
top:0;
right:0;
z-index:1000;
}
#sp-menu .drawr {
display: none;
background-color:rgba(220,244,236,0.98);
position: absolute;
top:0;
right:0;
width:100%;
padding:0 10% 0 10%;
z-index: 999;
font-size:1.4rem;
}


/*doc
---
name: sp-inner
category: general
tag: nav
---
*/
.sp-inner{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:80%;
}


/*doc
---
name: drawr
category: general
tag: nav
---
*/
.drawr p{ text-align:center; }
.drawr ul{ 
overflow:hidden;
margin-top:30px;	
}
.drawr li{ 
width:100%;
}
.drawr li a{
text-align:center;
display:block;
width:100%;
height:45px;
line-height:45px;
letter-spacing:2px;
}


/*doc
---
name: search-in-drawr
category: general
tag: nav
---
*/
dl.search-in-drawr{
margin-top:20px;
position:relative;
border-bottom:1px solid #666;
}
dl.search-in-drawr dt{
padding:8px 0 8px 0;
}
dl.search-in-drawr dt input{
width:100%;
height:24px;
font-size:1.3rem;
line-height:24px;
background:none;
border:none;
}
::placeholder{
color:#666;
}
dl.search-in-drawr dt input{
outline:none;
}
dl.search-in-drawr dd{
position:absolute;
top:0;
right:0;
}
dl.search-in-drawr dd button{
display:block;
padding:10px;
background:none;
border:none;
}
dl.search-in-drawr dd button span{
display:block;
width:20px;
height:20px;
background:url('../img/common/img/ico_search.svg') no-repeat scroll 0 0;
}


/*doc
---
name: menu-trigger
category: general
tag: nav
---
*/
.menu-trigger,
.menu-trigger span {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}
.menu-trigger {
position: relative;
width: 55px;
height: 55px;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 30%;
height: 2px;
background-color:#333;
}
.menu-trigger span:nth-of-type(1) { top: 36%; left: 35%; }
.menu-trigger span:nth-of-type(2) { top: 47%; left: 35%; }
.menu-trigger span:nth-of-type(3) { top: 58%; left: 35%; }
.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(6px) rotate(-45deg);
transform: translateY(6px) rotate(-45deg);
background-color:#333;
}
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-6px) rotate(45deg);
transform: translateY(-6px) rotate(45deg);
background-color:#333;
}

}


/* #Header
  -------------------------------------------------------------------------- */
#g-header{ 
width:100%;
height:460px;
position:relative;
padding-top:100px;
background-color: #dcf4ec;
animation: bg-color 15s infinite;
-webkit-animation: bg-color 15s infinite;
}
@-webkit-keyframes bg-color {
0% { background-color: #dcf4ec; }
33% { background-color: #fdf0f6; }
66% { background-color: #d9f1fc; }
100% { background-color: #dcf4ec; }
}
@keyframes bg-color {
0% { background-color: #dcf4ec; }
33% { background-color: #fdf0f6; }
66% { background-color: #d9f1fc; }
100% { background-color: #dcf4ec; }
}


/* #g-gNav
  -------------------------------------------------------------------------- */
#g-gnav{
position: absolute;
top: 30px;
right: 70px;
z-index:10;
}
#g-gnav li{ 
float:left;
display: inline-block;
font-size:1.2rem;
margin-top:11px;
margin-right:26px;
padding-bottom:5px;
text-indent:2px;
position:relative;
}
#g-gnav li:last-child{
margin-top:0;
}
#g-gnav li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
#g-gnav li a::after {
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
#g-gnav li a:hover::after {
  transform: scale(1, 1);
}
#g-gnav li.active{
border-bottom: 1px solid #333;
opacity:0.3;
}
#g-gnav .inline-item + .inline-item::before {
content: "/";
margin-left:14px;
margin-right:14px;
}


/*doc
---
name: search-in-gnav
category: top
tag: nav
---
*/
dl.search-in-gnav{
margin-left:10px;
position:relative;
border-bottom:1px solid #333;
}
dl.search-in-gnav dt{
margin-right:30px;
padding:8px 0 7px 0;
}
dl.search-in-gnav dt input{
width:100%;
height:24px;
font-size:1.3rem;
line-height:24px;
background:none;
border:none;
}
/*
dl.search-in-gnav dt input[type=”text”] {
font-size:16px;
transform:scale(1.0);
}
*/
::placeholder{
color:#666;
}
dl.search-in-gnav dt input{
outline:none;
}
dl.search-in-gnav dd{
position:absolute;
top:0;
right:0;
}
dl.search-in-gnav dd button{
display:block;
padding:10px;
background:none;
border:none;
}
dl.search-in-gnav dd button span{
display:block;
width:20px;
height:20px;
background:url('../img/common/img/ico_search.svg') no-repeat scroll 0 0;
}


/*doc
---
name: g-main
category: general
tag: header
---
*/
#g-main{
width:80%;
max-width:1152px;
position:relative;
height:350px;
margin:10px auto 0;
background-size:cover;
border-radius:30px 30px 0 0;
}
#g-main .go-home a{ 
opacity: 1;
transition: opacity 0.2s;
}
#g-main .go-home a:hover{
opacity:0.3;
}
#g-main .header-logo{
text-indent: -9999px;
background: url("../img/common/logo/logo_basic.svg") no-repeat left top;
background-size: contain;
width: 300px;
height: 77px;
position:absolute;
z-index:10;
margin:-55px 0 0 -80px;
}


/*doc
---
name: ttl-primary
category: general
tag: header
---
*/
.ttl-primary{
position:absolute;
margin:260px 0 0 30px;
white-space: nowrap;
}
.ttl-primary h1{
font-size:4.6rem;
line-height:1;
letter-spacing:10px;
color:#fff;
}
.ttl-primary h1 .jp{
font-size:1rem;
letter-spacing:10px;
display:block;
padding-top:0.5em;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

#g-header{ 
height:380px;
padding-top:70px;
}
	
#g-gnav{
display:none;
}


/*doc
---
name: g-main
category: general
tag: header
---
*/
#g-main{
height:300px;
}
#g-main .header-logo{
width: 60%;
margin:-55px 0 0 -5%;
}


/*doc
---
name: ttl-primary
category: general
tag: header
---
*/
.ttl-primary{
margin:200px 0 0 6%;
}

}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

#g-header{
height:230px;
}	


/*doc
---
name: g-main
category: general
tag: header
---
*/
#g-main{
height:150px;
}
#g-main .header-logo{
margin:-11% 0 0 -5%;
}


/*doc
---
name: ttl-primary
category: general
tag: header
---
*/
.ttl-primary{
margin:88px 0 0 6%;
}
.ttl-primary h1{
letter-spacing:5px;
font-size:3.2rem;
}
.ttl-primary h1 .jp{
letter-spacing:3px;
font-size:0.8rem;
padding-top:0.3em;
}

}



/* #cont
  -------------------------------------------------------------------------- */
.cont{ 
width:100%;
background-color:#fff;
}
.cont.s-bdr-top{ 
border-top:1px solid #eee;
}

.cont-in-main{ 
width:80%;
max-width:1040px;
padding:75px 0;
margin:0 auto;
}

#page_tit{
text-align:center;
font-size:2rem;
letter-spacing:4px;
background:url("../images/bg_tit.png") repeat-x left bottom;	
background-size: 3px 3px;
padding-bottom:18px;
}

.tit_info{
font-size:1rem;
margin-top:16px;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

#cont-in-main{
padding:30px 0 90px;
}

}


/*doc
---
name: pager-nav
category: general
tag: nav
---
*/
.pager-nav{
margin-top:100px;
}
.pager-nav .pagination{
text-align:center;
letter-spacing:0;
}
.pager-nav .pagination li{
display:inline;
margin:0 1px;
padding:0;
display:inline-block;
width:35px;
height:35px;
font-size:1.1rem;
color:#000;
text-align:center;
position:relative;
background:#fafafa;
}
.pager-nav .pagination li i{
position:relative;
}
.pager-nav .pagination li i::before{
position:absolute;
}
.pager-nav .pagination li a{
vertical-align:middle;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
color:#000;
display:table;
text-decoration:none;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all  0.3s ease;
}
.pager-nav .pagination li.none,
.pager-nav .pagination li.none a{
color:#ddd;
background:none;
cursor:default;
}
.pager-nav .pagination li.none a:hover{
background:none;
}
.pager-nav .pagination li a span{
display:table-cell;
vertical-align:middle;
}
.pager-nav .pagination li a:hover,
.pager-nav .pagination li a.active{
background:#ddd;
}
.pager-nav .pagination li.pre i::before{
top:-8px;
left:-8px;
}
.pager-nav .pagination li.next i::before{
top:-8px;
right:-9px;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.pager-nav .pagination li{
display:none;
}
.pager-nav .pagination li.pre,
.pager-nav .pagination li.next{
display:inline-block;
width:40%;
height:50px;
text-align:center;
}
.pager-nav .pagination li.pre a,
.pager-nav .pagination li.next a{
width:100%;
text-align:center;
}
.pager-nav .pagination li.pre.none,
.pager-nav .pagination li.next.none,
.pager-nav .pagination li.pre.none a,
.pager-nav .pagination li.next.none a{
color:#ddd;
background:none;
}
.pager-nav .pagination li.pre.none a:hover,
.pager-nav .pagination li.next.none a:hover{
background:none;
}
.pager-nav .pagination li.pre span::after{
content: "　前の15件へ";
}
.pager-nav .pagination li.next span::before{
content: "次の15件へ　";
}
.pager-nav .pagination li.pre i::before{
top:3px;
left:-30px;
}
.pager-nav .pagination li.next i::before{
top:3px;
right:-30px;
}

}



/* #Footer
  -------------------------------------------------------------------------- */

/*doc
---
name: cont-ft
category: general
tag: layout
---
*/
#cont-ft{
width:100%;
background-color: #dcf4ec;
padding:45px 0 55px;
}
#cont-ft h3{
text-align:center;
font-size:1.8rem;
letter-spacing:4px;
font-weight:bold;
}
#cont-ft .inner{
width:700px;
margin:30px auto 0;
}
#cont-ft .tel{ 
width:50%;
float:left;
}
#cont-ft .number{
font-size:2.8rem;
letter-spacing:3px;
line-height:1.2;
padding-bottom:0.3em;
}
#cont-ft .number span{
font-size:2rem;
}
#cont-ft .ex{
font-size:1.2rem;
line-height:1.6;
padding-bottom:3px;
}
#cont-ft .link{
margin-top:5px;
width:50%;
letter-spacing:2px;
float:left;
}
#cont-ft .link a {
background-color: none;
border:2px solid #333;
color:#333;
font-weight:bold;
line-height:42px;
width:100%;
}
#cont-ft .link a:hover {
background-color: #333;
border-color:#333;
color:#fff;
}


/*doc
---
name: ftnav
category: general
tag: nav
---
*/
#ftnav{
width:80%;
max-width:1040px;
margin:0 auto;
padding:65px 0 70px;
position:relative;
}
#ftnav .line{
padding-bottom:12px;
}
#ftnav .line-em{
text-align:left;
}
#ftnav .line-em .copyright-TP{
font-size: 0.7rem;
float: right;
}
#ftnav h1{
float:left;
text-indent: -9999px;
background:url("../img/common/logo/logo_basic.svg") no-repeat center top;	
background-size:180px 46px;
width: 180px;
height: 46px;
}
#ftnav ul{
float:left;
padding:20px 0 0 40px;
}
#ftnav li{ 
float:left;
display: inline-block;
font-size:1.1rem;
margin-right:24px;
}
#ftnav li:nth-child(7),
#ftnav li:last-child{
margin-right:0;
}
#ftnav .inline-item + .inline-item::after {
content: "/";
margin-left:12px;
margin-right:12px;
}
#ftnav p{
position:absolute;
top:60px;
right:0;
}
_:-ms-lang(x)::-ms-backdrop, #ftnav p{
width:20px;
height:50px;
}
#ftnav p a img{
width:20px;
}
#ftnav a{ 
opacity: 1;
transition: opacity 0.2s;
}
#ftnav a:hover{
opacity:0.3;
}
#ftnav em{
font-size:0.85rem;
letter-spacing:3px;
color:#555;
}


/*doc
---
name: copyright
category: general
tag: text
---
*/
.copyright{
display: block;
font-size: 0.8rem;
position: fixed;
right: 3%;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}


/*doc
---
name: address
category: general
tag: text
---
*/
.address{
display: block;
font-size: 0.8rem;
position: fixed;
left: 3%;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;

-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-o-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){


/*doc
---
name: cont-ft
category: general
tag: layout
---
*/
#cont-ft h3{
width:80%;
margin:0 auto;	
text-align:left;	
font-size:1.4rem;
letter-spacing:3px;
}
#cont-ft h3 span{
padding-bottom:5px;
}
#cont-ft .inner{ 
width:80%;
margin:20px auto 0;
}
#cont-ft .tel{ 
width:100%;
float:none;
}
#cont-ft .number{
font-size:2rem;
letter-spacing:2px;
}
#cont-ft .link{
margin-top:20px;
width:100%;
float:none;
}


/*doc
---
name: ftnav
category: general
tag: nav
---
*/
#ftnav{ 
width:80%;
padding:50px 0 30px;
}
#ftnav .line{
padding-bottom:0;
}
#ftnav .line-em{
padding-top:20px;
text-align:center;
line-height:1.3;
}
#ftnav .line-em .copyright-TP{
font-size: 0.6rem;
padding-top: 12px;
float: none;
display: block;
}
#ftnav h1{
float:none;
text-indent: -9999px;
background:url("../img/common/logo/logo_vertical.svg") no-repeat center top;	
background-size:150px 122px;
width: 150px;
height: 122px;
margin:0 auto;
}
#ftnav ul{
float:none;
padding:0;
margin-top:20px;
}
#ftnav li{ 
margin-right:0;
text-align:center;
width:48%;
padding:10px 0;
border-bottom:1px solid #eee;
}
#ftnav li:nth-child(even){
margin-left:4%;
}
#ftnav .inline-item + .inline-item::after {
content: "";
margin-left:0;
margin-right:0;
}
#ftnav p{
position:static;
text-align:center;
margin-top:30px;
}
_:-ms-lang(x)::-ms-backdrop, #ftnav p{
margin:30px auto 0;
}
#ftnav p a img{
width:20px;
}
#ftnav em{
font-size:0.7rem;
}


/*doc
---
name: copyright
category: general
tag: text
---
*/
.copyright{
position:static;
right:0;
top:0;
transform:none;
text-align:center;
padding-bottom:50px;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}


/*doc
---
name: address
category: general
tag: text
---
*/
.address{
display: none;
}

	
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

/*doc
---
name: cont-ft
category: general
tag: layout
---
*/
#cont-ft .number{
font-size:2.2rem;
letter-spacing:2px;
}
#cont-ft .ex{
font-size:1rem;
line-height:1.4;
padding-bottom:3px;
}


/*doc
---
name: ftnav
category: general
tag: nav
---
*/
#ftnav li .no-sp{ 
display:none;
}

}



/* =============================================================================
   #error
   ========================================================================== */
   

/*doc
---
name: unit-error
category: general
tag: error
---
*/
.unit-error{
padding:30px 0 0;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

.unit-error{
padding:30px 0 0;
}

}


/*doc
---
name: error-txt
category: general
tag: error
---
*/
.error-txt{
font-size:1.4rem;
}
.error-txt b{
font-weight:bold;
}
.error-txt .size-mid{
font-size:1.6rem;
}
.error-txt i{
position:relative;
top:5px;
left:0;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.error-txt{
font-size:1.2rem;
}
.error-txt .size-mid{
font-size:1.3rem;
}

}


/* #Header（g-header）for error
  ----------------------------------------------------- */
.kv-error{
background: linear-gradient(0deg, rgba(131,225,186,0.9) 10%, rgba(131,225,186,0) 70%),url("../img/about/bg_kv.jpg") no-repeat center center;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.kv-error{
background: linear-gradient(0deg, rgba(131,225,186,0.9) 10%, rgba(131,225,186,0) 80%),url("../img/about/bg_kv.jpg") no-repeat center center;
}
	
}



/* #sec for error
  ----------------------------------------------------- */
.sec-error{ 
padding:0 0 30px;
}
.sec-error-in{
width:100%;
position:relative;
}

/* ====================================================
   @media screen = max-width:740px
   ================================================= */
@media screen and (max-width:740px){

.sec-error{ 
padding:0 0 20px;
}
	
}



/* =============================================================================
   #color
   ========================================================================== */
.s-color-error {
color: #eb6877 !important;
}



/* =============================================================================
   #share buttons
   ========================================================================== */
   
   
/*doc
---
name: mod-sns
category: general
tag: module
---
*/
.mod-sns{
text-align:left;
margin-left:-52px;
}
#ftnav li.mod-sns-item{ 
padding:0 0;
border-bottom:none;
}
#ftnav li.mod-sns-item{
margin-left:0;
}
.mod-sns-list{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
.mod-sns-item{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
}
.mod-sns-link{
display:block;
}

/* ====================================================
   @media screen = max-width:1024px
   ================================================= */
@media screen and (max-width:1024px){

.mod-sns{
margin-left:0;
}
#ftnav li.mod-sns-item{ 
padding:0 0;
border-bottom:none;
}
#ftnav li.mod-sns-item{
margin-left:0;
}

}


/*doc
---
name: ico-cmn-facebook
category: component
tag: Icon
---
*/
.ico-cmn-facebook{
width:25px;
height:25px;
color:#77a0c7;
}
.ico-cmn-facebook-wrap{
display:-webkit-inline-box;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
width:38px;
height:38px;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
/*
border:1px solid #1c60a2;
border-radius:50%;
*/
background-color:#fff;
}


/*doc
---
name: ico-cmn-twitter
category: component
tag: Icon
---
*/
.ico-cmn-twitter{
width:21px;
height:21px;
color:#66ccf6;
}
.ico-cmn-twitter-wrap{
display:-webkit-inline-box;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
width:38px;
height:38px;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
/*
border:1px solid #00abf0;
border-radius:50%;
*/
background-color:#fff;
}


/*doc
---
name: ico-cmn-hatena
category: component
tag: Icon
---
*/
.ico-cmn-hatena{
width:20px;
height:17px;
color:#66c8eb;
}
.ico-cmn-hatena-wrap{
display:-webkit-inline-box;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
width:38px;
height:38px;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
/*
border:1px solid #00a4de;
border-radius:50%;
*/
background-color:#fff;
}


/*doc
---
name: ico-cmn-line
category: component
tag: Icon
---
*/
.ico-cmn-line{
width:24px;
height:24px;
color:#66dd66;
}
.ico-cmn-line-wrap{
display:-webkit-inline-box;
display:-webkit-inline-flex;
display:-ms-inline-flexbox;
display:inline-flex;
width:38px;
height:38px;
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
/*
border:1px solid #00c700;
border-radius:50%;
*/
background-color:#fff;
}