@charset "UTF-8";
/*
Theme Name: charart
Version: 1.0
Author: charart
*/

/* ===============================================================
      reset
=============================================================== */
html, body, div, applet, object, iframe,p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong{
	font-weight: bold;
}
.clearfix{
	width:100%;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.clear {
	clear:both;	
}
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
.toggleImg {}

/* ===============================================================
      common
=============================================================== */
html {
	font-size: 62.5%;
}
body{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight: 400;
	font-size: 1.5em;
	color: #312F26;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	background-color: #FFF;
}
p {
	line-height: 1.8;
}

/* 画面から画像がはみ出ないようにする */
img {
	max-width:100%;
	width /***/:auto; /* IE8のみ */
	height:auto;
	vertical-align:bottom;
}
.ta-c{text-align:center !important}
.ta-r{text-align:right !important}
.ta-l{text-align:left !important}
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright {
	float: right;
	margin-bottom: 15px;
	margin-left: 20px;
}
.touch{
	display: block;
}
.touch,
.touch a{
    background-color:transparent;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
.touch:hover {
	text-decoration: none;
}
.touchstyle {opacity: 0.5;}
.notouchstyle {opacity: 1;}
.alignleft {
	float: left;
	margin-right: 20px;
	margin-bottom: 15px;
}
#wrap {
	width: 100%;
}
#contents {
	display: block;
}
#contents p {
	margin-bottom: 1em;
}
.inner:after{
	content: "";
	display: block;
	clear: both;
}
.inner2:after{
	content: "";
	display: block;
	clear: both;
}.section {
	width: 100%;	
}
.section:after{
	content: "";
	display: block;
	clear: both;
}
.reverse {
	flex-direction : row-reverse;
}
.ttl404 {
	font-size: 36px;
}
.kadomaru {
	border-radius: 5px;
}
.thum {
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
}
.thum img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* ----------- アニメーション ----------- */
.inviewfadeIn {
        opacity: 0;
        transition: .8s;
    }
    
    .fadeIn {
        opacity: 1.0;
    }

    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;
    }
    
    .inviewfadeInUp {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    } 
    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }

/* ----------- ボタンデザイン ----------- */
.btn1 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	flex: 1 1 auto;
	margin: 10px;
	border: 2px solid #e4007f;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow:hidden;
	transition: .3s;
	border-radius: 50px;
	color: #e4007f;
	font-weight: bold;
	background: #FFF;
}
.btn1:hover {
	cursor: pointer;
	box-shadow: inset 0px 0px 0px 3px #e4007f;
	text-decoration: none;
	color: #e4007f;
	background: #FFF;
}
.btn1:hover:after {
	width: 0%;
	left: 0;  
}
.btn2 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	flex: 1 1 auto;
	margin: 10px;
	border: 1px solid #e4007f;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow:hidden;
	transition: .3s;
	border-radius: 50px;
	color: #FFF;
	font-weight: bold;
	background: #e4007f;
}
.btn2:hover {
	cursor: pointer;
	box-shadow: inset 0px 0px 0px 1px #e4007f;
	text-decoration: none;
	color: #e4007f;
	background: #FFF;
}
.btn2:hover:after {
	width: 0%;
	left: 0;  
}
.btn3 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	flex: 1 1 auto;
	margin: 10px;
	border: 1px solid #e4007f;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	overflow:hidden;
	transition: .3s;
	border-radius: 50px;
	color: #e4007f;
	font-weight: bold;
	background: #FFF;
}
.btn3:hover {
	cursor: pointer;
	box-shadow: inset 0px 0px 0px 3px #e4007f;
	text-decoration: none;
	color: #e4007f;
	background: #FFF;
}
.btn3:hover:after {
	width: 0%;
	left: 0;  
}
.btn_w100 {
	display: block;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* ボタンエフェクト*/
.btnEffect::before,
.btnEffect::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.btnEffect,
.btnEffect::before,
.btnEffect::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/* ---------------------------------------------------- /
    　　　　　　　　 link
------------------------------------------------------ */
a {
	color: #23A9E2;
	outline: none;
	text-decoration: none;
}
a:hover{
	color: #666;
	text-decoration: underline;
}
.link {
	margin-left: 5px;
}
.link:after {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: bold;
	margin-left: 4px;
	margin-right: 4px;
	font-size: 14px;
}

/* ---------------------------------------------------- /
    　　　　　　　　 margin
------------------------------------------------------ */
.mb0 {margin-bottom:0px!important;}
.mb5 {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!important;}
.mb20 {margin-bottom:20px!important;}
.mb30 {margin-bottom:30px!important;}
.mb40 {margin-bottom:40px!important;}
.mb50 {margin-bottom:50px!important;}
.mb80 {margin-bottom:80px!important;}
.mb100 {margin-bottom:100px!important;}


/* ---------------------------------------------------- /
    　　　　　　　　 フォント設定
------------------------------------------------------ */
.ffm1 {
	font-family: 'Roboto', sans-serif;
}

/* font size*/
.fs10 {font-size:10px}
.fs11 {font-size:11px}
.fs12 {font-size:12px}
.fs14 {font-size:14px}
.fs16 {font-size:16px}
.fs18 {font-size:18px}
.fs24 {font-size:24px}
.fs28 {font-size:28px}
.fs30 {font-size:30px}

/* color */
.txtPink {
	color: #FF718D;
}
.txtGold {
	color: #C49917;
}
.txtRed {
	color: #E7490E;
}


/*--------------------------------------------------------------
              Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
	font-size: 15px; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	padding: 8px;
}
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",;
	border: 0;
	color: #fff;
	background-color: #F34758;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	text-transform: uppercase;
	border-radius: 4px; /* CSS3草案 */
	-webkit-border-radius: 4px;/* Safari,Google Chrome用 */
	-moz-border-radius: 4px;/* Firefox用 */
}
.button {
	-webkit-appearance: none;
}

input[type="submit"] {
	margin-top: 5px;
}
button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	opacity: 0.9;
	text-decoration: none;
	color: #fff;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing:    content-box;
	box-sizing:         content-box;
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	font-weight: 400;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}
.screen-reader-response {
	display: none;
}
input[type=checkbox] {
	width:14px;
	height:14px;
	margin-right: 10px;
	-moz-transform:		scale(1.3);
	-webkit-transform:	scale(1.3);
	transform:		scale(1.3);
}
.mwform-checkbox-field label{
	display: block;
}
/*Webkit*/
::-webkit-input-placeholder {color: #bbb !important;}
/*Firefox 19以降*/
::-moz-placeholder {color: #bbb !important;}
/*Windows IE*/
:-ms-input-placeholder {color: #bbb !important;}

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

/* ===============================================================
      footer
=============================================================== */
#footer {
	width: 100%;
	text-align: center;
	z-index: 1;
}
.footBnrArea {
	width: 100%;
	background: url(img/common/bk-img1.jpg);
	z-index: 90;
}
.copyright {
	font-size: 13px;
	text-align: center;
	background: #FFF;
	border-top: 4px solid #9cc813;
}
#pagetop {
	z-index: 10000;
}

.about__links {
	display: flex;
	flex-direction: column;
}

.btn1.btnEffect span {
	text-transform: lowercase;
}


.btn1.btnEffect span {
	text-transform: lowercase;
}

.about__items {
	display:block;
	text-align: center;
}

.about__btn {
	display: inline-block;
}

@media screen and (max-width: 768px) {
	.about__items {
		display: flex;
		flex-direction: column;
}
	
	.about__btn:not(:first-child) {
		margin-top: 30px;
	}
}