@charset "utf-8";

:root {
    --white: #fff;
	--black: #434341;
    --gray: #cccccc;
    --smoke: #f5f5f5;
	--red: #e12a24;
	--darkred: #7c0905;	
	--pink: #ed7b78;
	--peach:#f3c0bf;
	--cream:#f9f6f5;
	--beige:#b19c88;
	--font-jp:"Zen Kaku Gothic Antique", sans-serif;
	--font-jp-min:"Shippori Mincho B1", serif;
	--font-en:"Trykker", serif;
	--font-en-unique:"Ms Madi", cursive;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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-size: 100%;
	font: inherit;
	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;
}
img{
	line-height: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
	vertical-align:top;
	
}


/*=======================================================

common

========================================================*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  text-align: center;
  font-size: 17px;
	color: var(--black);
	background-color: var(--white);
	font-family: var(--font-jp);
}
@media screen\0 {
  body {	 }
}

::placeholder{	
	color:var(--gray); 
	letter-spacing: 1px; font-size: 14px; font-weight: normal; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

p.front{
	letter-spacing: 2px;
    padding: 16px 0 4px 0px;
    font-size: 15px;
    font-weight: 600;
}

p.back{
	background-color: #ffefee;
    padding: 10px 16px;
    width: 100%;
    margin-top: 1em;
    box-sizing: border-box;
    font-size: 14px;
	letter-spacing: 1px
}

.short{	width: 30%;}
@media screen and (max-width:1200px) { p.short{	width: 40%;} }
@media screen and (max-width:800px) { p.back{	width: 100%;} }

@media screen and (max-width:500px) { p.short{	width: 55%;} }




/*=======================================================

sub

========================================================*/



.flexbox{
	display: flex;
    flex-wrap: wrap;
}
.flexbox div{
	width: 47%;
	margin-right: 3%;
}
.flexbox div .short{
	width: 95%;
}

.flex-birth{
	display: flex;
	flex-wrap: wrap;
}
.flex-birth > div{
	width: 30%;
}
.flex-birth > div:first-of-type{
	width: 40%;
}
.flex-birth > div input[type="text"]{
	width: 85%;
}
.flex-birth > div select{
	width: 80%;
}
.flex-birth > div .front{
	display: block;
	width: 100%;
}
.flex-birth .year,
.flex-birth .month,
.flex-birth .day{
	font-size: 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

@media screen and (max-width:600px) { 
	.flex-birth > div{width: 25%;}
	.flex-birth > div:first-of-type{width: 50%;}
	.flex-birth .year,.flex-birth .month,.flex-birth .day{font-size: 12px;}

}



/*=======================================================

sub

========================================================*/

.contentsArea{
}

.contentsArea .wrapper{	
	width:90%;
	max-width: 1000px;
	margin: 0 auto;
}



/*=======================================================

sub

========================================================*/



.radioBoxArea{
	display: flex;
	flex-wrap: wrap;
}
.radioBoxArea .radioBox{
	width: 30%;
}

		@media (max-width:600px) {
				.radioBoxArea .radioBox{width: 45%;}
		}


table.xf_block {
	margin: 5em 0 0 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--white);
  border-top: 1px solid var(--gray);
	background-color: var(--white);
  text-align: left;
}
table.xf_block th {
  box-sizing: border-box;
  font-size: 15px;
  font-weight: bold;
  padding: 0 20px;
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--gray);
  border-left: 1px solid var(--gray);
	background-color: var(--smoke);
}

span.xf_essential{
    margin-left: 0.5em;
    color: var(--red);
	font-weight: normal;
    font-size: 10px;
    letter-spacing: 2px;
}


@media screen and (max-width:600px) {
	span.xf_essential{	
		font-size: 10px;}
}
	
table.xf_block th.xf_table_title{
	font-size: 18px;
	padding: 1em;
	border-left: none;	
	border-left: 1px solid var(--gray);
	border-right: 1px solid var(--gray);
    background-image: url(https://takigawa.co.jp/gakuin/assets/images/bg-3.webp);
    background-size: cover;
    background-position: center;	
}

@media screen and (max-width:600px) {
	table.xf_block th.xf_table_title{
		border-left: none;
		border-right: none;
	    padding: 14px 10px 13px 10px;}
	}

table.xf_block td{
	box-sizing: border-box;
	width: 75%;
	 padding: 10px 24px 29px 24px;
	  border-bottom: 1px solid var(--gray);
	  border-left: 1px solid var(--gray);
	  border-right: 1px solid var(--gray);
	  border-top: none;
}
input[type="text"], input[type="tel"], input[type="email"], textarea{
	width: 100%;
    padding: 10px;
    border: 1px solid var(--gray);
    background: var(--white);
    font-size: 16px;
    line-height: 1.3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="checkbox"]{
margin-right: 8px;
}
input[type="radio"]{}

input[type="radio"] + label{
  font-size: 16px;
}

input[type=checkbox] :checked+label::before {
background: cornflowerblue;
}

input[type=checkbox] + label{
    font-size: min(4vw, 17px);
    letter-spacing: 1px;
    margin-right: 14px;
}

input[type=checkbox]:checked + label, input[type="radio"]:checked + label{
  font-weight:bold;
  border-bottom: 1px solid var(--gray);
}

div.zip input[type="text"] {
  width: 250px;
}

select {
    width: 100%;
    padding: 10px 0;
    border-radius: 4px;
    border: 1px solid var(--gray);
    font-weight: bold;
    font-size: 16px;
}


input[type="submit"] {
	display: inline-block;
    text-decoration: none;
    color: var(--white);
	border-radius: 19px;
    cursor: pointer;
    font-size: 23px;
    margin: 6em auto 3em auto;
    padding: 24px 8px 28px 8px;
    transition: 0.7s;
    width: 85%;
	max-width: 600px;
	background: #b52626;
    background: linear-gradient(0deg, rgb(157 78 78) 0%, rgb(211 26 26) 41%);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border: 2px solid #fff;
	text-shadow: 0 0 2px #311712;
}

input[type="submit"]:hover{
  background: var(--beige);
  border: 1px solid var(--beige);
	color: var(--white);
}

p.done{
  padding: 10px;
  background-color: var(--smoke);
  line-height: 1.7em;
}





@media screen and (min-width:769px) {
	.pc_display{
		display: block;
	}
	.sp_display{
		display: none;
	}
}

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

	div.wrapper{
		width: 95%;
		margin: 0 auto;
	}
		
	h1{width: 100%;}
	h1 picture{
		width:60%;
	}
	h1 picture img{width: 100%; height: auto}
	
	


}
@media screen and (max-width:600px) {
  .sp_display{
    display: block;
  }
  .pc_display{
    display: none;
  }
  div.wrapper{
    width: 95%;
  }

	table.xf_block{
		border: 1px solid var(--gray);
		border-bottom: none;
		
	}
    table.xf_block tr{
      display: block;
    }
	
    table.xf_block th{
      display: block;
      width: 100%;
      padding: 16px 0 16px 10px;
      text-align: left;
		border-right: none;
		border-left: none;

	}
	
    table.xf_block td{
      display: block;
      width: 100%;
      padding: 15px 10px 24px 10px;
		border-right: none;
		border-left: none;
		
    }
 
	input[type="text"], input[type="tel"], input[type="email"], textarea{
      width: 100%;

      box-sizing: border-box;
      padding: 9px 13px;
      border: 1px solid var(--gray);
      border-radius: 4px;
      background: var(--white);
      font-size: 16px;
      line-height: 1.3;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      display: inline-block;
    }
	
}


/*==========================================================================

HEADER

===========================================================================*/

.header-menu{
	display: flex;
	flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
	padding-bottom: 20px;
	margin-bottom: 3em;
	}

		@media (max-width:1200px) {
			.header-menu{
				width: 95%;
			}
		}
		@media (max-width:768px) {
			.header-menu{
				width: 98%;
				flex-direction: row;
				align-items: stretch;
			}
		}

/*==============
HEADER_logo
===============*/
header{
	padding-top: 15px;
}
.header-menu h1{
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 5px;
    letter-spacing: 1px;
    font-weight: normal;
    text-align: center;
}
.header-menu p.logoarea{
	box-sizing: border-box;
	max-width: 280px;
}
.header-menu p.logoarea img{
	width: 100%;
	height: auto;}


		@media (max-width:600px) {
			.header-menu p.logoarea{ padding-left: 10px;}
		}	




/*==========================================================================

FOOTER

===========================================================================*/

footer{
	width:100%;
	padding: 50px 0 15px 0;
	background-color: var(--white);
	border-top: 1px solid var(--gray);
	margin-top: 5em;
}
footer .footerArea{
	width:100%;
	max-width: 1920px;
	margin: 0 auto;
}
footer p{
	line-height: 1.5;
    font-size: 14px;
    color: var(--black);
    letter-spacing: 2px;
	text-align: left;
}

footer a{
	color: var(--black);
	border: 0;
	text-decoration: none;
	border-bottom: none;
}
footer a:hover{
	color: var(--red);
}
footer .footer_logo{
	width: 80%;
	margin: 0 auto;
}

footer .footer_logo .ft-logo_fig{
	width: 30%;
}

	footer .footer_logo .ft-logo_fig h2{
		width: 50%;
		max-width: 260px;
		height: auto;
		margin-bottom: 26px;
	}
	footer h4{
		font-weight: bold;
		margin-bottom: 14px;
		text-align: left;

	}
	footer .ft-logo_fig h2 img{
		width: 100%;
		height: auto;
	}

footer .ft_note{
	width: 30%;
}
footer .footer_Map{
	display:flex;
	flex-wrap:wrap;
	width: 80%;
	margin: 0 auto;
	justify-content: space-between;
	padding-bottom: 35px;
	border-bottom: 1px dotted var(--black);
}

footer .footer_Map .footer_siteMap{
	width: 50%;
}


			@media (max-width:1200px) {
				footer .ft_note{width: 40%;}
				footer .footer_Map{width: 90%}
				footer .footer_logo{width: 90%}

			}
			@media (max-width:780px) {
				footer .footer_logo .ft-logo_fig{width: 60%;}
				footer .footer_logo .ft-logo_fig h2{width: 100%;}
				footer .ft_note{width: 100%; margin-bottom: 1.5em;}
				footer .footer_Map .footer_siteMap{width: 100%}

			}




footer .footer_Map .footer_siteMap ul{
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;	
}

footer .footer_Map .footer_siteMap ul li{
	line-height: 1.3;
	margin-bottom: 10px;
	font-size: 13px;
	letter-spacing: 2px;
	margin-right: 1.5em;
}

footer .footer_Map .footer_inquiry{
	width: 25%;
}

footer .footer_Map .footer_inquiry p a{
	display:block;
    width: 100%;
    border-radius: 32px;
    border: 1px solid var(--bordercolor-2);
    padding: 22px 0;
    text-align: center;
    font-size: 15px;
	letter-spacing: 5px;
    background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgb(255 255 255) 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.5s;
	position: relative;
	text-decoration: none;
}

footer .footer_Map .footer_inquiry p a::after{
	content: "";
    position: absolute;
    right: 10px;
    width: 15px;
    height: 15px;
    background: url(../images/arrow-right-white.png) no-repeat;
    background-size: contain;
    top: 40%;
}




footer .footer_Map .footer_inquiry p a:hover{
	color: var(--red);
	opacity: 1;
}

				@media (max-width:780px) {
					footer .footer_Map .footer_inquiry p a{
						padding: 15px 0;
					}
				}

.footer_Map .footer_inquiry p a:hover {
  background-position: -100% 0;
  color: var(--white);
}
.footer_copyright{
	width: 80%;
	margin: 15px auto 0 auto;
	display: flex;
	font-size: 13px;
}
				@media (max-width:780px) {
					.footer_copyright{width: 90%;}
				}


footer address{
	letter-spacing: 2px;
	margin-right: 33px;
}

.footer_copyright .sns_button{
	display: flex;
	
}
.footer_copyright .sns_button li{
	width: 26px;
	margin-right: 15px;
}
.footer_copyright .sns_button li a img{
	width: 100%;
	height: auto;
	margin-right: 15px;
}


/*=======================================================

Google

========================================================*/



.googlemapArea{
	clear:both;
	text-align:center;
	margin:50px auto;
	}
	
.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin:0 auto;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
	height: 500px;
}


@media screen and (max-width: 1024px) {
.googlemap {
width: 100%;
}
.googlemap iframe {
height: 100%;
}
}



/*=======================================================

designLayout

========================================================*/
.header_ttl{}
.header_ttl h3{
	font-size: min(5vw, 26px);
    margin-bottom: 9px;
    letter-spacing: 2px;
}
.note{
font-size: min(3.5vw, 15px);
    line-height: 1.8;
    margin-bottom: 24px;
}
.note em{
	font-weight: bold;
	border: 1px solid #555;
	padding: 0 4px;
	border-radius:5px;
}


.bg-2{
    background-color: #f5f3f3;
    background-image: url( "https://takigawa.co.jp/gakuin/assets/images/backsheet.png");
    background-position: center bottom;
    background-repeat: repeat;
    background-size: 29% auto;
}
		@media (max-width:900px) {
			.bg-2{ background-size: 42% auto;}
		}

.headline-1{
	padding: 4em 0 2em 0;
	margin-bottom: 3em;
}

	.headline-1 .hd-title-1 span{
		display: block;
		font-size: min(3.3vw, 22px);
		font-weight: 600;
		padding-top: 8px;
		letter-spacing: 1px;
	}

.talign-c {
    text-align: center;
}

.hd-title-1 {
    font-size: min(6.3vw, 45px);
    display: block;
    width: 100%;
    padding-bottom: 1em;
    font-weight: 400;
    font-family: var(--font-jp-min);
}