/* common
-----------------------------------------------*/

body, input, textarea {
  font-family: "メイリオ", "Meiryo", "verdana", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-section h3.section-subheading,
.subheading,
.heading,
.footer  {
  font-family: "メイリオ", "Meiryo", "verdana", sans-serif;
}

@font-face {
  font-family: "Marker-Felt";
  src: url("../font/Marker-Felt.woff2") format("woff2"),
       url("../font/Marker-Felt.woff") format("woff");
}
.Marker-Felt{
  font-family: "Marker-Felt";
  text-transform:none!important;
  letter-spacing: 4px;
}


.head-title {max-width:700px}
@media screen and (max-width: 768px){
	.head-title {max-width:500px}
	}

@media screen and (max-width: 480px){
	.head-title {width:300px}
	}



.text-green{color: #00ACC1!important;}
.text-sky{color: #343434!important;}
.m-text{font-size: 18px;}
.s-text {font-size: 12px;}

a {
  color: #343434!important;
}

a:hover {
  color: #343434!important;
}

a:hover img{
  opacity:0.6;
  filter:alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}


::selection {
  background-color: #343434!important;
  color: #fff;
}
::-moz-selection {
  background-color: #343434!important;
  color: #fff;
}

@media screen and (min-width: 576px){
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 576px){
  .br-pc { display:none; }
  .br-sp { display:block; }
}


/* header
-----------------------------------------------*/
#mainNav {
	padding-top: 0.5rem!important;
	padding-bottom: 0.5rem!important;
}

#mainNav .navbar-brand img {
	height: 3rem!important;
}

#mainNav .navbar-nav .nav-item .nav-link {
	text-transform: none!important;
	color: #fff!important;
	padding: 0.5em 0.75em!important;
	}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link {
	color: #fff!important;
	border-bottom: dashed 2px transparent;
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
	color: #fff!important;
	border-bottom: dashed 2px #fff;
}

@media (min-width: 768px){
#mainNav {
    background-color:#343434!important;
}
}

@media (max-width: 768px) {
#mainNav {
    background-color:#343434!important;
	}
.menu-btn {
	margin-left:10px!important;
	padding: 20px 0;
	}
}

#mainNav .navbar-toggler {
    background-color:#343434;
    border: 1px solid #fff;
}

@media (min-width: 992px) {
  #mainNav {
	padding-top: 0.75rem!important;
	padding-bottom: 0.75rem!important;
    background-color: transparent!important;
  }
  #mainNav.navbar-shrink {
    background-color:#343434!important;
	}
}

.menu-btn {
	margin-left: 20px;
	margin-top: -5px;
	}

/* masthead
-----------------------------------------------*/
header.masthead{
  background-image: url("../img/header-bg.jpg")!important;
}
.dl-btn {
	height: 50px;
	margin-top: 30px;
}

/* intro
-----------------------------------------------*/
#intro {background: #ecf8f8;}





/* features
-----------------------------------------------*/
.line {
	border: none;
    background-color: #fff;
    border-width: 2px 0 0 0;
    border-top: dashed;
    border-color: #ecf8f8;
}




/* guide
-----------------------------------------------*/
#guide {
	background: url("../img/stripe.jpg");
	background-repeat: repeat;
}

#accordion1,
#accordion2,
#accordion3,
#accordion4,
#accordion5{margin-bottom: 5px;}

.card{
	border: #fff solid 2px!important;
}

.card-header h5{
	padding-right: 20px;
}

#headingOne,
#headingTwo,
#headingThree,
#headingFour,
#headingFive {
	border-bottom: transparent 1px solid!important;
	background: #ecf8f8;
}

#headingOne a:hover,
#headingTwo a:hover,
#headingThree a:hover,
#headingFour a:hover,
#headingFive a:hover {
	text-decoration: none;
}

#guide .collapsed::after {
 	content: "\f0fe";
 	font-family: "Font Awesome 5 Free";
 	font-weight: 900;
 	position: absolute;
 	right : 0.5em;
 	top: 1.2em;
}

#guide [aria-expanded="true"]::after {
	content: "\f146";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right : 0.5em;
 	top: 1.2em;
}


.step1,
.step2,
.step3,
.step4,
.step5 {
  position: relative;
  background: #ffd98a;
  padding: 2px 5px 2px 25px;
  font-size: 16px;
  color: #474747;
  border-radius: 0 10px 10px 0;
}

.step1:before {
  content: "1";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: normal;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 34px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white;
  border-radius: 50%;
}


.step2:before {
  content: "2";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: normal;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 34px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white;
  border-radius: 50%;
}

.step3:before {
  content: "3";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: normal;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 34px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white;
  border-radius: 50%;
}

.step4:before {
  content: "4";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #ffa337;
  font-weight: normal;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 34px;
  left: -1.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 3px white;
  border-radius: 50%;
}


/* functions
-----------------------------------------------*/
#functions {background: #fef9ec;}

#functions .functions-item {
  right: 0;
  margin: 0 0 15px;
}

#functions .functions-item .functions-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  background-color: #fff;
  border-radius:5px;
}

#functions .functions-item .functions-caption h4 {
  margin: 0;
  text-transform: none;
  font-size: 16px;
  color: #F4A583;
  margin: 10px 0;
}

#functions .functions-item .functions-caption p {
  font-size: 16px;
  margin: 0;
  text-align: left;
}

@media (min-width: 767px) {
  #functions .functions-item {
    margin: 0 0 30px;
  }
}



/* contact
-----------------------------------------------*/
#contact {
	background:#f7f9f9!important;
}

#contact h2 {color: #343A40!important;}

section#contact form#contactForm .form-group-textarea {
  height: 600px!important;
  border: 1px solid #ff0000;
}

.form-control {
	height: auto!important;
}

.help-btn {
	border: none;
	background: #f7f9f9;
	color: #00ACC1;
}

.help-btn img {
	margin-top: -3px;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#d3d3d3!important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#d3d3d3!important;
}
::placeholder{ /* Others */
    color:#d3d3d3!important;
    font-family: "メイリオ", "Meiryo", "verdana", sans-serif!important;
    font-weight: 300!important;
}

.btn-primary{
    background-color:#343434!important;
	border: none!important;
}

.btn-primary:hover{
    background-color:#343434!important;
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=8s0 )";
	border: none!important;
}


/* footer
-----------------------------------------------*/
@media screen and (max-width: 992px){
  .spacer { margin-top: 20px;}
  }


footer a {color: #343434;}

 /* campaign
-----------------------------------------------*/

.navbar-toggle {
    z-index: 2;
}

.navbar-brand-center {
    width: 100%;
    text-align:center;
    margin: auto;
}

@media (min-width: 768px) {
    .navbar-brand-center {
        margin-left: 0 !important;
    }
}

#lead {
	background: #ffffff;
}
.winner {
	background: url("../img/stripe.jpg");
	background-repeat: repeat;
}
#details {
	background: #ecf8f8;
}

.bg-sky{
	background: #ecf8f8;
}
.bg-green{
	background: #343434;
}

.message {
  color: #474747;
  background: #ffd98a;
  border-radius:30px;
}

.marker {
	background: linear-gradient(transparent 50%, #ffd98a 50%);
}

.date {
	display: block;
	float: left;
	text-align: left
}

.code {
	display: block;
	text-align: right;
	float: right;
}

.tw-btn {
	text-align: right;
	float: right;
	margin-top: -8px;

}
.add {
	text-align: left;
	float: left;
}


.clear {
	clear:both;
}
.btn-outline {
	border: 2px #00ACC1 solid;
	padding: 10px;
	display: block;
	border-radius:10px;
	margin: 5px 0;
}

.tweet-text {
	white-space: nowrap;
}

.bg-light {
	background:#f7f9f9!important;
}

.radius {
	border-radius:10px;
}
.guideline {
	color: #00ACC1;
	border-bottom: dotted 2px #343434;
}

.small {
	height: 70px;
}

 /* campaign form
-----------------------------------------------*/


.panel{border: 1px solid #474747!important;}
#sendMessageButton:disabled {
	background: #ccc!important;
	color: #fff;
	cursor:not-allowed;
	pointer-events: none;
}

 /* floating bottom
-----------------------------------------------*/
.fixed-share {margin-bottom: 50px;}
ul.footer_menu {
	margin-left: -30px;
	top: 50%;
	position: fixed;
	z-index: 999;
}

ul.footer_menu li {
	color: #fff;
	list-style-type: none;
	font-size: 30px;
	margin: 3px;
	width: 50px;
	height: 50px;
	text-align: center;
	background: #fff;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent;
  transition: .3s ease-out;
  border-radius: 50%;
   line-height: 50px;
}


ul.footer_menu li #foot_fb{
	color: #3B5998!important;
    }

ul.footer_menu li #foot_tw{
	color: #00ACEE!important;
	}

ul.footer_menu li #foot_line{
	color: #00B900!important;
	}


@media (max-width: 768px) {
	ul.footer_menu {
		top: inherit;
		bottom: 0;
		}
	ul.footer_menu li {
		float: left;
		}
}