@charset "UTF-8";
/***********************************************
TGC CSS information
File Name : base.css
Last modified : :2019
***********************************************/



*{
	margin:0;
	padding:0px;
	}

@media print, screen and (min-width: 770px){
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }



.join-mail_head {
	margin:130px 0 20px 0;
	padding: 0;
	width:100%; 
                                 height: 100px;
	text-align:left;
  background:  url(../menu/head.png);
background-size: cover;
	float:left;
                                display: flex;
                                align-items: center;
                                font-family: serif ;
}

.join-mail_head .title {
	margin:0 0 0 40px;
	font-size:38px;
	line-height:1em;
                                color:#0b619a;
                                position: relative;
                                z-mail: 1;
}
.join-mail_head .subtitle {
	margin:0 0 0 20px;
	font-size:28px;
	line-height:1em;
                                color:#0b619a;
                                position: relative;
                                z-mail: 1;
}


.join-mail_set1 {
	margin:30px 0 0 0;
	padding:0;
	width:1300px; 
	text-align:left;
	float:left;
}


.head {
	margin:80px 0 30px 0;
	position: relative;
	width: 100%;
	padding-bottom: 15px;
	font-size: 28px;
	line-height:1em;
                                color:#587a97;
	float:left;
}

.head::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #587a97 0px, #587a97 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}


.join-mail_set1 .waku{
	margin: 0;
	padding:20px;
	width:100%; 
	text-align:left;
	float:left;
	line-height:1.5em;
                                border: solid 1px #7a8798;
                                border-radius: 10px;
                                background:  url(../join/img/back.png) no-repeat ;
                                background-position: 98% 98%;
                                background-size: 30%;
}
.join-mail_set1 .title{
	margin:30px 0 20px 0;
	padding:0 0 20px 0;
	width:100%; 
	text-align:center;
	float:left;
                                font-size:36px;
                                border-bottom: solid 1px #7a8798;
}

.join-mail_set1 .koumoku1{
	margin:10px 0 0 20px;
	padding:5px 0 0 10px;
	width:150px; 
                                height:30px;
	font-size:1.2em;
	text-align:left;
	float:left;
                                clear:both;
                                border-left: solid 10px #7a8798;
}

.join-mail_set1 .koumoku2{
	margin:10px 0 0 0;
	padding:0 0 0 20px;
	width:800px; 
                                height:30px;
	text-align:left;
	float:left;
                                border-left: solid 2px #7a8798;
}
.join-mail_set1 .koumoku3{
	margin:10px 0 0 0;
	padding:0 0 0 20px;
	width:800px; 
	text-align:left;
	float:left;
                                border-left: solid 2px #7a8798;
}

.join-mail_set1 .koumoku4{
	margin:20px 0 0 0;
	padding:0 0 0 20px;
	width:100%; 
	text-align:left;
	float:left;
}


.cp_iptxt input[type='text'] {
	font-size:1.2em;
	box-sizing: border-box;
	width:500px;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #aaaaaa;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef input[type='text']:focus {
	border: 1px solid #2278d9;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(34,120,217, .5);
}

.cp_iptxt textarea {
	font-size:1.2em;
	box-sizing: border-box;
	width:500px;
                                height:200px;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #aaaaaa;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef textarea:focus {
	border: 1px solid #2278d9;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(34,120,217, .5);
}


.submitbutton {
  display       : inline-block;
border: 1px solid #ccc;
  border-radius : 7px; 
	width:150px;
  font-size     : 18px; 
  text-align    : center; 
  padding       : 7px 0 7px 0; 
                                background: #f1e767;
                                background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
                                background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
                                background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  color         : #648eb0;
  line-height   : 1em; 
  opacity       : 1; 
  transition    : .3s;  
}
.submitbutton:hover {
                                background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
                                background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
                                background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
                                  color: #e66969;
}

}



@media only screen and (max-width: 770px) {

/* スマホで見たときは"sp"のclassがついた画像が表示される */

.sp { display: block !important; }
.pc { display: none !important; }

img {
  max-width: 100%;
  height: atuo;
}


.join-mail_head {
	margin:0px 0 0 0;
	padding: 0;
	width:100%; 
                                 height:80px;
	text-align:left;
                                background:  url(../menu/head.png);
                                background-size: cover;
                                display: flex;
                                align-items: center;
                                font-family: serif ;
}

.join-mail_head .title {
	margin:0 0 0 10px;
	font-size:1.7em;
	line-height:0.9em;
                                color:#0b619a;

}
.join-mail_head .subtitle {
	margin:0;
	font-size:0.7em;
	line-height:1em;
                                color:#0b619a;
}


.head {
	margin:50px 0 30px 0;
	position: relative;
	width: 100%;
	padding-bottom: 15px;
	font-size: 1.3em;
	line-height:1em;
                                color:#587a97;
	text-align:left;
}

.head::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #587a97 0px, #587a97 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}


.join-mail_set1 {
	margin:50px 0 20% 2%;
	padding:0;
	width:96%; 
	text-align:left;
}

.join-mail_set1 .waku{
	margin:10px 0 10px 0;
	padding:5%;
	width:90%; 
	text-align:left;
	line-height:1.2em;
                                border: solid 1px #7a8798;
                                border-radius: 10px;
                                background:  url(../join/img/back.png) no-repeat ;
                                background-position: 98% 98%;
                                background-size: 20%;

}
.join-mail_set1 .title{
	margin:20px 0 20px 0;
	padding:0 0 10px 0;
	width:100%; 
	text-align:center;
                                font-size:1.3em;
                                border-bottom: solid 1px #7a8798;
}

.join-mail_set1 .koumoku1{
	margin:10px 0 0 0;
	padding:5px 0 0 10px;
	width:100%; 
	font-size:1.2em;
	text-align:left;
                                border-left: solid 10px #7a8798;
}

.join-mail_set1 .koumoku2{
	margin:10px 0 0 0;
	padding:0 0 0 0;
	width:100%; 
	text-align:left;
}
.join-mail_set1 .koumoku3{
	margin:10px 0 0 0;
	padding:0 0 0 0;
	width:100%; 
	text-align:left;
}

.join-mail_set1 .koumoku4{
	margin:20px 0 0 0;
	padding:0 0 0 0;
	width:100%; 
	text-align:left;
}


.cp_iptxt input[type='text'] {
	font-size:1.2em;
	box-sizing: border-box;
	width:100%;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #aaaaaa;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef input[type='text']:focus {
	border: 1px solid #2278d9;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(34,120,217, .5);
}

.cp_iptxt textarea {
	font-size:1.2em;
	box-sizing: border-box;
	width:100%;
                                height:100px;
	padding: 0.3em;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #aaaaaa;
	border: 1px solid #1b2538;
	border-radius: 4px;
}
.ef textarea:focus {
	border: 1px solid #2278d9;
	outline: none;
	box-shadow: 0 0 5px 1px rgba(34,120,217, .5);
}


.submitbutton {
  display       : inline-block;
border: 1px solid #ccc;
  border-radius : 7px; 
	width:150px;
  font-size     : 1.3em; 
  text-align    : center; 
  padding       : 7px 0 7px 0; 
                                background: #f1e767;
                                background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
                                background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
                                background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  color         : #648eb0;
  line-height   : 1em; 
  opacity       : 1; 
  transition    : .3s;  
}
.submitbutton:hover {
                                background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
                                background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
                                background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
                                  color: #e66969;
}

}