@charset 'UTF-8';

/*
COLORS
================================================ */
:root {
    --light-blue: #4db1ec;
    --blue: #1665cc;
    --purple: #b473bf;
    --pink: #ffb2c1;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --light-green: #a2e29b;
    --green: #00a2af;
    --grey: #333;
    --white: #fff;
    --light-orange: #f9ad8e;
    --dark-green: #239d4d;
}


/*
HERO
================================================ */
#hero {
    /* ↓ 省略形だとブラウザーによってうまく表示されない
    background: var(--light-blue) url('../images/hero.jpg') no-repeat center / cover; */
    background-color: var(--light-orange);
    background-position: center;
    background-size: cover;
    background-blend-mode: screen;
    animation: bg-color 24s infinite;
    height: 28vh;/*60vh*/
    display: flex;
    align-items: center;/*center*/
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    padding-top: 44px;/*追加*/
}

#hero h1 {
    text-align: center;
    border-top: 3px solid var(--grey);
    border-bottom: 3px solid var(--grey);
    padding: 1.0rem 0;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}


/*
kan 肝胆膵グループ
================================================ */
#kan {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#kan h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#kan h3 {
 font-size: 1.1rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}

.kan-under {
  border-bottom: solid 5px #accbee;
}

/*
shouka 消化管グループ
================================================ */
#shouka {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#shouka h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#shouka h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}
.shouka-under {
  border-bottom: solid 5px #accbee;
}

/*
IBD グループ
================================================ */
#ibd {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#ibd h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#ibd h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}

.ibd-under {
  border-bottom: solid 5px #accbee;
}

/*
gatukai 学会・研究発表について
================================================ */
#gatukai {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#gatukai h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#gatukai h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}
.gatukai-under {
  border-bottom: solid 5px #accbee;
}

/*
tashisetu 他施設との交流、国際交流について
================================================ */
#tashisetu {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#tashisetu h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#tashisetu h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}
.tashisetu-under {
  border-bottom: solid 5px #accbee;
}

/*
etravel 医局旅行について
================================================ */
#etravel {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#etravel h2 {
    padding-top: 14px;
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#etravel h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}
.etravel-under {
  border-bottom: solid 5px #accbee;
}
/*
shien 妊娠・出産・育児の女性医師支援について　
================================================ */
#shien {
    padding: 4rem 1rem 0rem 1rem;/*4rem*/
}
#shien h2 {
font-size: 1.4rem;
    padding-top: 14px;
    padding-bottom: 10px;
/*    background-image: linear-gradient(45deg, #fff 30%, #ccc 30%, #ccc 50%, #fff 50%, #fff 80%, #ccc 80%, #ccc 100%);*/
    background-image: linear-gradient(45deg, #fff 30%, #f8d0c0 30%, #f8d0c0 50%, #fff 50%, #fff 80%, #f8d0c0 80%, #f8d0c0 40%);
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
#shien h3 {
 font-size: 1.4rem;
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
    text-align: center;
}
#shien p {
    margin-bottom: 2rem;
}

/* 追加 */
   #shien	ul {
	  padding-left: 24px;
   list-style-image: url(../img/mark_01.png);
}

#shien	ul li {
     line-height: 1.7;
     margin-bottom: 16px;
     border-bottom: 1px dotted #999;
    }
.shien-under {
  border-bottom: solid 5px #accbee;
}

/* 追加 写真の余白*/
.item {
		padding-bottom: 2rem;
}

/* 追加 テキスト 資格*/
.f_01 {
text-align: center;
font-size: 1.4rem;
letter-spacing: 0.1rem;
padding-top: 1.1rem;
margin-bottom: 0.7rem;
border-bottom: 1px solid rgba(221,221,221,.9);
}
.f_02 {
text-align: center;
font-size: 1.3rem;
letter-spacing: 0.1rem;
padding-top: 0.7rem;
margin-bottom: 0.7rem;
}



/*
ABOUT
================================================ */
#about {
    padding: 4rem 1rem;
}
#about h2 {
  background: linear-gradient(var(--yellow), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
#about p {
    margin-bottom: 2rem;
}

/* 追加 */
   #about	ul {
	  padding-left: 24px;
   list-style-image: url(../img/mark_01.png);
}

#about	ul li {
     line-height: 1.7;
     margin-bottom: 16px;
     border-bottom: 1px dotted #999;
    }
		
/*
NEWS
================================================ */
#news {
 /*   background-image: linear-gradient(var(--light-orange), var(--orange));*/
    padding: 0rem 0;
/*    -webkit-clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);*/
}
#news h2 {
    color: var(--grey);
    background: #f8f6f2;
    padding: 1rem 0;
    margin-top: 3rem;
}

/*
SPEAKERS
================================================ */
#speakers {
    padding: 4rem 1rem;
}
.speakers-list {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.speakers-text {
    margin-left: 1rem;
}
#speakers h2 {
  background: linear-gradient(var(--light-blue), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
#speakers h3 {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}
#speakers img {
    border-radius: 50%;
    width: 20%;
}

/*
TICKET
================================================ */
#ticket {
    /*background-image: linear-gradient(var(--pink), var(--purple));*/
    background: var(--grey);
    padding: 0rem 1rem 1rem;/*6rem 1rem 2rem*/
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}/*0 0, 100% 10%, 100% 100%, 0 100%*/
#ticket h2 {
    color: var(--white);
}
.ticket-form {
    max-width: 480px;
    margin: 0 auto 5rem;
}
.ticket-form label {
    color: var(--white);
    display: block;
    margin-bottom: .5rem;
}
.ticket-field {
    background: rgba(255,255,255,.6);
    padding: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
}
.ticket-btn {
    background: var(--grey);
    color: var(--white);
    display: block;
    width: 100%;
    padding: 1rem;
    margin-top: 1rem;
}


/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {


	/* 追加 */
   #about	ul {
	   padding-left: 24px;
    list-style-image: url(../img/mark_01.png);
    }
		#about	ul li {
     line-height: 1.7;
     margin-bottom: 16px;
     border-bottom: 1px dotted #999;
    }
	
	/* Hero */
    #hero h1 {
        font-size: 2.5rem;
    }
	/* 追加 */
   #shien	ul {
	   padding-left: 24px;
    list-style-image: url(../img/mark_01.png);
    }
		#shien	ul li {
     line-height: 1.7;
     margin-bottom: 16px;
     border-bottom: 1px dotted #999;
    }
	

/* Speakers */
    #speakers h2 {
        margin-bottom: 4rem;
    }
    .speakers-list {
        margin-bottom: 3rem;
    }
    .speakers-text {
        margin-left: 2rem;
    }
    
  /* 3列画像　追加 240px*/	
		.grid_01 {
  display: grid;
  gap: 26px;/*26px*/
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  /*margin-top: 6%;*/
  margin-bottom: 10px;
}      

 /* 2列画像　追加 240px*/	
		.grid_02 {
  display: grid;
  gap: 40px;/*26px*/
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  /*margin-top: 6%;*/
  margin-bottom: 10px;
}   

/* 5列画像　追加 240px*/	
		.grid_03 {
  display: grid;
  gap: 20px;/*26px*/
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /*margin-top: 6%;*/
  margin-bottom: 10px;
}   

/* 4列画像　追加 240px*/	
		.grid_04 {
  display: grid;
  gap: 20px;/*26px*/
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /*margin-top: 6%;*/
  margin-bottom: 10px;
}   

}